如何使用具有多个数组的对象的钩子设置状态?如何在这里设置债务人

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(( 中传入项目索引，以便它知道要更新数组中的哪个项目。你可以让函数做这样的事情：

在点击中：

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

在句柄删除((：

  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

Answer 2

你应该这样做：

setdebtors((prevState) => {
  let newArray = Array.from(prevState);    // Copy the array
  // Manipulate the array as you wish
  return newArray;                         // return it
});

Answer 3

问题是您正在改变需要通过债务人数组映射并更改对象中的任何属性的"债务人"数组。

const handleDelete = (stat, i) => {
const newList = newDebtors.map((debtor, i) => {
  if (i === 0) {
    debtor.statement = debtor.statement.filter(x => x.id !== stat.id);
  }
  return debtor;
});
setdebtors(newList);};

更好的方法是使用"useReducer"，它用于改变更复杂的状态片段，就像你在这里一样。文档非常有用使用Reducer

Answer 4

嗯，我不知道你到底想做什么，这是你要找的吗？

const handleDelete = (stat, i) => {
    const newList = newDebtors[0].statement.filter(x => x.id !== stat.id);
    const newFirstItem = {...newDebtors[0],statement: newList}
    const newDebtorList = newDebtors.filter(x => x.id !== newFirstItem.id);
    newDebtorList.unshift(newFirstItem);
    setdebtors(newDebtorList); 
}

我知道这看起来很复杂，但您实际上需要这样做，因为您无法在该状态下更改数组......我在这里所做的是我首先创建了一个新的语句列表(newList(，然后创建了一个要设置为新的 newDebts[0]的新 FirstItem，然后创建了一个新数组(newDebtorList(，其中包含除第一个之外的所有元素，我通过将 newFirstItem 推到第 0 位(使用 unshift(来修改这个数组终于用这个新数组更新了状态...希望对:)有所帮助

注意：这是为了更改第 0 个元素，如果您有 id，请相应地更改代码