如何正确解决React更新状态(使用useState / setState)但没有重新渲染组件的问题？
如何正确解决React更新状态(使用useState / setState)但没有重新渲染组件的问题？
提问于 2021-08-01 01:53:15
下面的代码演示了一个我无法解决的React问题。
点击“更新状态”按钮，通过将当前状态(具有3个字符串的数组)替换为更新的数组(具有4个字符串)来触发state的更新。
如console.logs所示，strings和state都已正确更新。但是，React组件不会重新呈现(不会显示带有"String D“的第4个段落)。如何确保在使用setState更新组件的state后立即进行重新呈现？我认为使用useState钩子的setState函数应该总是触发重新呈现过程。
const { useState } = require('react');
let strings = [
"String A",
"String B",
"String C"
]
const TestComponent = () => {
const [ state, setState] = useState(strings);
const click = () => {
strings.push("String D");
console.log(strings);
setState(strings, console.log(state));
}
return (
<div>
{ state.map( (item) => <p>{item}</p>) }
<button onClick={click}>Update State</button>
</div>
)
};
export default TestComponent;回答 2
Stack Overflow用户
发布于 2021-08-01 01:58:34
React是关于不变性的，所以你必须避免改变数组，而是完全替换它：
const click = () => {
const copy = [...strings]; //create a copy
copy.push("String D");
console.log(copy);
setState(copy, console.log(state));
}另一种语法是：
const click = () => {
const copy = [...strings, "String D"];
console.log(copy);
setState(copy, console.log(state));
}Stack Overflow用户
发布于 2021-08-01 04:58:15
尝尝这个
const click = () => {
setState([...strings, "String D"]);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68606955
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号