问如何正确解决React更新状态(使用useState / setState)但没有重新渲染组件的问题？
EN

Stack Overflow用户

提问于 2021-08-01 01:53:15

回答 2查看 31关注 0票数 0

下面的代码演示了一个我无法解决的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;

reactjs

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));
  }

票数 1

查看全部 2 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68606955

复制

相似问题

问如何正确解决React更新状态(使用useState / setState)但没有重新渲染组件的问题？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何正确解决React更新状态(使用useState / setState)但没有重新渲染组件的问题？EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何正确解决React更新状态(使用useState / setState)但没有重新渲染组件的问题？
EN