开发者问题收集

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

2022-07-05
3324
javascript reactjs axios 
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 的新手。 我遇到了一个问题，几天来一直在尝试解决。 我添加了用于删除请求的按钮，但以不同的方式，它返回了相同类型的错误： 未捕获的 TypeError：无法读取 null 的属性（读取“名称”）。

错误消息

用例是我在结果方法中使用此按钮，它会自动过滤人员列表： 

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>  
  ))}  
</>)}
3个回答

看起来您使用的是基于整个对象的数组值，而不是对象内部的人员值。从外观上看，您正在尝试查找值为 false 的名称，该名称似乎与您那里的内容不匹配。

您可能正在寻找类似这样的内容 

.then(setPersons(Object.values(personsList).filter(q => q.name !== persons.name)))}
Devon Ray
2022-07-05

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"]

2022-07-05

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

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>
        ))}
    </>
  );
};
2022-09-19