是吗?为什么从 React 的新 useState Hook 中改变状态是一个坏主意?我没有找到有关该主题的信息。
考虑以下代码:
const [values, setValues] = useState({})
// doSomething can be called once, or multiple times per render
const doSomething = (name, value) => {
values[name] = value
setValues({ ...values })
}
注意值的突变。由于每次渲染可以多次调用 doSomething,因此由于 setState 的异步属性,这样做将不起作用:
const doSomething = (name, value) => {
setValues({ ...values, [name]: value })
}
在这种情况下,直接改变值的方法是正确的吗?
最佳答案
您永远不应该直接改变状态,因为如果您使用相同的对象引用更新状态,它甚至可能不会导致重新渲染。
const { useState } = React;
function App() {
const [values, setValues] = useState({});
const doSomething = (name, value) => {
values[name] = value;
setValues(values);
};
return (
<div onClick={() => doSomething(Math.random(), Math.random())}>
{JSON.stringify(values)}
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
您可以将一个函数作为 setValues
的第一个参数,就像您在类组件 setState
中所习惯的那样,该函数反过来将获得正确的状态,如下所示参数,返回的将是新的状态。
const doSomething = (name, value) => {
setValues(values => ({ ...values, [name]: value }))
}
const { useState } = React;
function App() {
const [values, setValues] = useState({});
const doSomething = (name, value) => {
setValues(values => ({ ...values, [name]: value }));
};
return (
<div onClick={() => doSomething(Math.random(), Math.random())}>
{JSON.stringify(values)}
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
关于javascript - 从 React 的 useState 钩子(Hook)改变状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55178507/