如何在 React.js 中使用 .map 函数更新显示

Question

我有一个保存日志数据的 useState 变量，我正在使用 .map() 显示该数据，在某个特定时刻，将添加日志，我使用旧变量并重新影响新值如下所示：

const [logs, setLogs] = useState([])

const function1 = () => {
// some process here
 setLogs(myValues)
}
const function2 = () => {
// some process
let myNewValues = logs
// some other process
setLogs(myNewValues)
}

.map() 函数在第一个函数之后显示 logs 就好了，但是当我在第二个函数中用 setLogs 更新日志时， .map() 没有得到更新，它显示 function1 的旧值。

如何在 React 中解决这个问题？

提前致谢！

Answer 1

在我看来，您可能正在改变状态，而不是传递新状态。

与其改变日志数组，然后使用相同的数组引用调用 setState，不如尝试将新值散布到一个新的数组对象中，然后调用 setState。

const function2 = () => {
  let myNewValues = logs;
  setLogs([...myNewValues]);
};

调用 setState 时，React 查看对象引用，发现它收到了相同的数组引用，然后没有 re-render。通过传递一个新数组，React 看到状态已经改变，并且会相应地re-render。

如何在 React.js 中使用 .map 函数更新显示

How to update the display using .map function in React.js

javascript

node.js

reactjs

react-hooks

use-state