数组状态上的 PureComponent 浅比较仍然重新呈现页面

Posted 2023-02-23

【中文标题】数组状态上的 PureComponent 浅比较仍然重新呈现页面

【英文标题】：PureComponent shallow compare on array state stil re-renders page

【发布时间】：2021-09-12 05:34:20

【问题描述】：

如何对 PureComponent 进行浅比较以检查数组是否相等？

我有这门课：

class Login extends React.PureComponent 

  constructor() 
    super();
    this.state = 
      errorMsg: []
    
  

  signIn = async (fields) => 
   ......
    try 
      ......
      if (data.status === true) 
       ......
       else 

        // error message is still the same after constant login fails
        this.setErrorMsg(`$data.msg`);
      

     catch (error) 
     
    

  

  setErrorMsg(errorArr) 
    this.setState( errorMsg: [errorArr] );
  

  render() 
    ......
    this.state.errorMsg.map((err) =>
        <Alert
         className="p-1"
         variant="danger"
         show=err
         transition=false
         key=err
        >
        err
        </Alert>
    )
    ......
  

但this.state.errorMsg 更新为相同的值后，它仍然重新渲染，因为["Credentials is wrong"] === ["Credentials is wrong"] 返回false。如何动态地对数组状态进行浅比较？

【参考方案1】：

这就是浅比较的工作原理。 PureComponents 不适用于this。您可以传递特定的数组元素，例如 errMsg[0]。

来自文档：

仅当您希望拥有简单的道具和状态时扩展 PureComponent，或者当您知道深层数据结构已更改时使用 forceUpdate()。或者，考虑使用不可变对象来促进嵌套数据的快速比较。

【讨论】：

我试过了：shouldComponentUpdate(nextProps, nextState) return JSON.stringify(this.state.errorMsg) !== JSON.stringify(nextState.errorMsg); 这可能出了什么问题？

JSON.stringify(this.state.errorMsg) !== JSON.stringify(nextState.errorMsg);应该返回假。是否有其他东西触发了重新渲染？

没错，我希望它在 shouldComponentUpdate 中返回 false。但我认为我必须使用不可变的 js