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

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

你应该这样做：

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

Answer 2

有两个问题：

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

你需要：newDebtors[0].statement.map

2) 您需要在 handleDelete() 中传入项目索引，以便它知道要更新数组中的哪个项目。你可以让函数做这样的事情：

在点击时：

 <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

Answer 3

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

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"，它用于改变更复杂的状态片段，就像您在此处所做的那样。文档非常有用 useReducer

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），然后创建一个 newFirstItem 以设置为新的 newDebtors[0]，然后创建一个包含 newDebtors 的所有元素的新数组（newDebtorList），除了第一个，我通过将 newFirstItem 推到第 0 个位置（使用 unshift）修改了这个数组最后用这个新数组更新了状态...... 希望对您有所帮助:)

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

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

How do i setState with hooks of an object which has multiple arrays ? How to setdebtors here?

javascript

reactjs

react-hooks