Reactjs React shouldComponentUpdate是否未检测到数组长度更改？

更改通过道具传递的数组长度时，“shouldComponentUpdate”函数无法检测数组长度的更改。 我知道'shouldComponentUpdate'无法检测嵌套对象属性中的更改，但这是一个简单的数组长度！！这是React中的一个bug吗

---

这不是React中的错误，而是代码的问题。 您不应直接修改此.state值

试试这个：

  componentDidMount: function() {
    var self = this;
    setTimeout(function() {
      self.setState({arr: self.state.arr.concat([7])});
    }, 2000);
  }

它起作用了。因为React在传递道具时不会克隆道具，所以对数组的更改会反映在其所有引用上

我建议您阅读更多关于Javascript中不变性的内容

简言之，永远不要这样做。声明。[任何内容]。push/pop/shift/unshift，永远不要。 改为这样做：

var arr = this.state.arr.slice(); // Create a copy of the array
arr.push(2); // do whatever you want to do
this.setState({ arr: arr }); // pass changes to React

---

仅仅因为您有两个引用this.props.arr，nextrops.arr并不意味着您有两个实例

当使用push修改数组时，修改实例。当shouldComponentUpdate运行时，它会比较引用，因为它们指向同一实例，所以数组长度是相同的

如果要传递具有不同元素或属性的新数组，则还需要创建一个新数组

用推力代替康卡特是很容易的

---

您正在if中引用同一数组，即，您正在修改同一数组而不是创建新数组，并且您正在shouldComponentUpdate中处理对同一数组的两个引用

因此，使用.concat创建一个新数组，而不是将其推到状态为的数组上，将解决当前的问题

setTimeout(function () {
    this.setState({arr: this.state.concat([7])});
}.bind(this), 2000);

如果在shouldComponentUpdate中执行此操作，则会看到数组彼此相等

setTimeout(function() {
  self.setState({
    arr: self.state.concat([7])
}, 2000);

setTimeout(function () {
    this.setState({arr: this.state.concat([7])});
}.bind(this), 2000);