在数组的 setState 上重新加载

Question

我刚开始使用 React 和 next。我想知道为什么当我像这样 [test, setTest] = useState("test") 更新 useState 时，该值会在网页上重新加载，但在下面的情况下不会。任何人都可以解释为什么以及如何解决它吗？

const [testing, setTest] = useState({
        name:"test"
    })

    function test(){
        setTest(old =>{
            old.name = "new name"
            return old;
        })
    }

    return (
        <ThemeProvider theme={theme>
            <button onClick={test} />
            <GlobalStyles/>

            <h1>{testing.name}</h1>
        </ThemeProvider>
    )

Answer 1

尝试

 function test(){
            setTest({...testing,name : "new name"})
        }

Answer 2

react 的核心原则之一是状态是不可变的。设置状态后，React 将在旧状态和新状态之间执行 ===。如果结果为真，则 React 认为没有任何变化并跳过渲染。因为你正在改变状态，它会传递一个 ===，并且反应不能告诉你改变了对象。

因此，您需要创建一个新对象，而不是改变状态对象：

setTest(old => {
  return {
    ...old,
    name: "new name"
  }
})

在数组的 setState 上重新加载

React reload on setState of an array

reactjs

next.js