React Persons组件删除功能引发filter报错问题求助

问题描述 #

添加removePerson删除功能及按钮后，Persons组件持续报错persons.filter is not a function。删除操作可正常删除db.json中的数据，但应用随即崩溃；仅保留搜索展示功能时组件运行正常。

问题根源 #

错误出在removePerson函数的状态更新逻辑：

.then((response) => setPersons(response.persons));

personService.getAll()返回的axios响应对象中，后端返回的数组数据存储在response.data字段，而非response.persons。执行setPersons(response.persons)会将persons状态设置为undefined，后续Persons组件接收的persons不是数组，调用filter方法自然触发报错。

修复方案 #

方案1：修正状态更新的数据源 #

修改removePerson函数中更新状态的代码，将response.persons改为response.data：

const removePerson = (id) => {
    axios.get(`http://localhost:3001/persons/${id}`).then((response) => {
      const confirm = window.confirm(`Delete ${response.data.name} ?`);
      console.log(response.data.name);

      if (confirm) {
        axios
          .delete(`http://localhost:3001/persons/${id}`)
          .then((response) => {
            console.log(response.data + "  after delete");
            return personService.getAll();
          })
          .then((response) => setPersons(response.data)); // 此处修改
      }
    });
}; 

方案2：前端直接过滤数组（优化请求次数） #

删除操作完成后，无需重新请求全量数据，直接过滤现有数组更新状态，减少一次HTTP请求：

const removePerson = (id) => {
    axios.get(`http://localhost:3001/persons/${id}`).then((response) => {
      const confirm = window.confirm(`Delete ${response.data.name} ?`);
      if (confirm) {
        axios
          .delete(`http://localhost:3001/persons/${id}`)
          .then(() => {
            setPersons(persons.filter(person => person.id !== id));
          });
      }
    });
}; 

额外防护：组件内添加数组校验 #

为避免类似状态类型错误，可在Persons组件中先校验persons是否为数组，再执行过滤逻辑：

const Persons = ({persons, searchName, removePerson}) => {
  const exp = new RegExp( searchName, 'i' );
  const result = Array.isArray(persons) ? persons.filter(person => person.name.match(exp)) : [];
  return (
    result.map(person => (
      <p key={person.name}>
        {person.name}: {person.number} 
        <button onClick={() => removePerson(person.id)}>Delete</button>
      </p>
    ))
  )
}

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