javascript - 如何使用具有多个数组的对象的钩子(Hook)设置状态？这里如何设置债务人？

Question

我正在删除数组中的一个id，在这里过滤后如何设置状态？

https://codesandbox.io/s/react-example-1m2qn

 const Debtors = () => {
      const debtors = [
        {
          id: 1,
          name: "John",
          relation: "friend",
          statement: [
            { id: 1, date: 2010, amount: "1000", purpose: "John" },
            { id: 2, date: 2014, amount: "2000", purpose: "john" }
          ]
        },   
,
    {
      id: 2,
      name: "Jack",
      relation: "Friend",
      statement: [
        { id: 1, date: 2010, amount: "1000", purpose: "jack" },
        { id: 2, date: 2014, amount: "2000", purpose: "jack" }
      ]
    }  


      ];


  const [newDebtors, setdebtors] = React.useState(debtors);

  const handleDelete = (stat, i) => {
    const newList = newDebtors[0].statement.filter(x => x.id !== stat.id);

// How to set debtors here ?
   // setdebtors({ ...newDebtors, statement[0]: newList }); 
  console.log(newList)

//这里如何设置债务人？

Answer 1

有两个问题:

1) 您正在渲染中迭代原始债务人对象，而不是通过 useState() 创建的 newDebtors 状态，这就是为什么没有出现任何 UI 更改。

您需要:newDebtors[0].statement.map

2) 您需要在handleDelete() 中传入项目索引，以便它知道要更新数组中的哪个项目。您可以让该函数执行如下操作:

在 onClick 中:

 <a
   href="javascript:;"
   onClick={() => handleDelete(stat, i, 0)}
 >

在handleDelete()中:

  const handleDelete = (stat, i, arrayIndex) => {
    const updatedDebtors = newDebtors.map((item, index) => {
      if (index === arrayIndex) {
        return {
          ...item,
          statement: item.statement.filter(
            statement => statement.id !== stat.id
          )
        };
      } else {
        return item;
      }
    });

    setDebtors(updatedDebtors);
  };

请参阅沙箱以获取完整解决方案:https://codesandbox.io/s/react-example-x7uoh