React.js删除功能报Cannot read properties of null (reading 'name')错误

新增用于触发删除请求的Button按钮后，经多次调整始终抛出固定报错：Uncaught TypeError: Cannot read properties of null (reading 'name')，报错触发时机为点击删除按钮发起请求阶段。

删除逻辑方法：

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)))}

列表过滤渲染组件：

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>  
  ))}  
</>)}

• 点击事件传参缺失：绑定删除方法时未传入当前待删除的人员对象，事件触发时方法接收到的第一个参数是默认的点击事件对象，而非预期的人员数据，读取name属性时自然因目标值为null/undefined触发报错。
• Promise链写法错误：第一个.then(console.log('done'))会在代码执行时立即触发，不会等待接口响应返回，后续then链的返回值没有正确传递，逻辑断裂。
• 状态更新逻辑错误：方法内的persons是入参的单条人员数据，Object.values(persons)取到的是单条对象的属性值数组，并非全量人员列表；过滤条件q.name !== false无法匹配到待删除项，完全不符合列表更新逻辑。
• 接口参数设计不规范：删除类接口优先使用唯一id作为路径参数，直接使用name作为参数容易因重名、特殊字符导致请求匹配不到资源，返回null值。

1. 修正按钮点击事件的传参逻辑，将当前遍历到的待删除人员对象传入方法：

<Button text='delete' handleClick={() => props.deletePerson(filteredName)} />

2. 重写删除方法，修正Promise链式调用和状态更新逻辑，提前做空值拦截：

// 注意：方法需要能访问到存储全量人员列表的persons状态变量
const deletePerson = (targetPerson) => {
  // 空值拦截，避免读取null/undefined的属性
  if (!targetPerson) return
  axios
    .delete(`http://localhost:3001/persons/${targetPerson.id}`) // 后端如果确实用name做标识就替换为targetPerson.name，优先推荐用id
    .then(() => {
      console.log('done')
      // 从全量列表中过滤掉已删除的人员，更新视图状态
      setPersons(persons.filter(item => item.id !== targetPerson.id))
    })
    .catch(error => console.error('删除请求失败:', error))
}

内容的提问来源于stack exchange，提问作者SKo