将存储数据从一种状态反应到另一种状态

Question

谁能帮我解决这个问题，我正在尝试使用下面的 gosetListReceiver() 函数从 tempList 状态获取一些属性以存储到 listReceiver 状态。

const [tempList, setTempList] = useState([]); 

const [listReceiver, setListReceiver] = useState([]);


    function gosetListReceiver() {
    let i = 0;
    while (i < tempList.length) {
        setListReceiver([
            ...listReceiver,
            {
                name: tempList[i]["name"],
                phone: tempList[i]["receiver"]
            }
        ]);

        i++;
    }
}

但是当我处于 mapping/console 之后的 listReceiver 状态时，我希望它将 3 个数组从 tempList 存储到 listReceiver 但它只有tempList 中存储的最后一项。我该如何解决这个问题？

在 tempList 的示例数据下方，因为我需要将名称和接收者属性存储到 listReceiver

Answer 1

我没有测试，但 setListReceiver() 开头的数组括号 [] 对我来说很可疑。

没有它们试试：

...
setListReceiver(
    ...listReceiver,
    {
        name: tempList[i]["name"],
        phone: tempList[i]["receiver"]
    }
);
...

或者绝对有效的方法，请查看 Array.push(...)。

Answer 2

每次通过循环，您都在覆盖状态，从而清除您上次通过循环所做的任何事情。要解决此问题，您有两种选择。

使用设置状态的函数版本，这样您就可以始终获得最新版本的状态：

setListReceiver((prev) => [
  ...prev,
  {
    name: tempList[i]["name"],
    phone: tempList[i]["receiver"],
  },
]);

等到你创建了完整的数组，然后在最后设置一次状态：

function gosetListReceiver() {
  let i = 0;
  const newState = [...listReceiver];
  while (i < tempList.length) {
    newState.push({
      name: tempList[i]["name"],
      phone: tempList[i]["receiver"],
    });

    i++;
  }
  setListReceiver(newState);
}

P.S，这段代码看起来更像是 for 循环，而不是 while 循环：

const newState = [...listReceiver];
for (let i = 0; i < tempList.length; i++) {
  newState.push({
    name: tempList[i]["name"],
    phone: tempList[i]["receiver"],
  });
}
setListReceiver(newState);

将存储数据从一种状态反应到另一种状态

React store data from a state into another state

reactjs

use-effect

use-state