未捕获的类型错误：无法读取 null 的属性 - React.js

Question

const deletePerson = (persons) => {
axios
  .delete(`http://localhost:3001/persons/${persons.name}`)
  .then(console.log(`done`))
  .then(response => response.data)
  .then(setPersons(Object.values(persons).filter(q => q.name !== false)))}

我是 React.js 的新手。 我有一个问题，我已经尝试解决了几天。 我为删除请求添加了按钮，并以不同的方式返回相同类型的错误：未捕获的类型错误：无法读取 null 的属性（读取“名称”）。

错误信息

我在结果方法中使用此 Button 的用例，该方法会自动过滤人员列表：

const Filter = (props) => {return (<> {props.persons.filter(person => person.name.toLowerCase().includes(props.showFiltered.toLowerCase())).map((filteredName, id) => (
    <li key={id.toString()}>
      {filteredName.name} {filteredName.number} <Button text='delete' handleClick={props.deletePerson} />
    </li>  
  ))}  
</>)}

Answer 1

看起来您正在使用基于整个对象的数组值，而不是对象内的 people 值。 从它的外观来看，您正试图找到一个值为 false 的名称，该名称似乎与您在那里的名称不匹配。

像这样的东西可能是你正在寻找的

.then(setPersons(Object.values(personsList).filter(q => q.name !== persons.name)))}

Answer 2

TLDR； （更新）

const deletePerson = (persons) => {
  axios
    .delete(`http://localhost:3001/persons/${persons.persons.name}`)
    .then(console.log(`done`))
    .then((response) => response.data)
    .then(() => setPersons(persons["persons"].filter((q) => q.name !== false)));
};

解释：

使用Object.values(persons)将返回嵌套数组，如下所示：

[
  [
    { "name": "Arto Hellas", "number": "040-123456", "id": 1 },
    { "name": "Ada Lovelace", "number": "39-44-5323523", "id": 2 },
    { "name": "Dan Abramov", "number": "12-43-234345", "id": 3 },
    { "name": "Mary Poppendieck", "number": "39-23-6423122", "id": 4 }
  ]
]

但是，您期望q变量为：

[
  { "name": "Arto Hellas", "number": "040-123456", "id": 1 },
  { "name": "Ada Lovelace", "number": "39-44-5323523", "id": 2 },
  { "name": "Dan Abramov", "number": "12-43-234345", "id": 3 },
  { "name": "Mary Poppendieck", "number": "39-23-6423122", "id": 4 }
]

因此，有两种方法可以解决此问题：

1. 提取嵌套数组Object.values(persons) => Object.values(persons)[0]

2. 直接访问对象值Object.values(persons) => persons["persons"]

Answer 3

发生错误的原因可能是请求失败，因为您没有将任何内容传递给deletePersons function。

const Filter = (props) => {
  return (
    <>
      {props.persons
        .filter((person) =>
          person.name.toLowerCase().includes(props.showFiltered.toLowerCase())
        )
        .map((filteredName, id) => (
          <li key={id.toString()}>
            {filteredName.name} {filteredName.number}
            <Button text="delete" handleClick={() => props.deletePerson(props.persons)} />
          </li>
        ))}
    </>
  );
};