React：数组长度更改不会触发子组件中的重新渲染答案

【问题标题】：React: Array length changes not triggering re-render in child componentReact：数组长度更改不会触发子组件中的重新渲染
【发布时间】：2021-07-25 16:57:18
【问题描述】：

在反应中，我有一个主题列表，每个主题都有一个嵌套的集合列表。主题呈现集合的长度和集合。有时我需要将一组从一个主题移到另一个主题。我可以在正确移动后重新渲染集合，但集合长度不会在视觉上改变。我相信这是改变状态的一个问题，但我相信我在对其进行任何更改之前使用 this.state.Topics.slice() 复制我的主题数组来弥补这一点。

TopicList.js

ChangeSetsTopic(event)
{
    var sourceTopic;
    var topics = this.state.Topics.slice();


   sourceTopic = topics.find(obj => {return obj.Topic == event.source.droppableId});

    var change_set;
    for (var i =  sourceTopic["Sets"].length - 1; i >= 0; --i) {
        if (sourceTopic["Sets"][i].SetID == event.draggableId) {
            change_set = sourceTopic["Sets"].splice(i,1)[0];
        }
    }

    var destinationTopic = topics.find(obj => {return obj.Topic == event.destination.droppableId});


    destinationTopic["Sets"].push(change_set);


    for (var i = 0 ; i < topics.length ; i++) {
        if (topics[i].Topic == sourceTopic.Topic) {
            topics[i] = sourceTopic;
        }
        else if (topics[i].Topic == destinationTopic.Topic) {
            topics[i] = destinationTopic;
        }
    }

   this.setState({"Topics" : topics });

    

}

    render(){ 
return( {this.state.Topics.map(( topic , key ) => (
            <Topic key={topic.Topic} Sets={topic.Sets} TopicName={topic.Topic}/>
      ))}
);}

主题.js

    componentDidUpdate(prevProps) {
        if(prevProps.Sets.length.toString() != this.props.Sets.toString() ) 
        {
          this.setState({"Sets" : this.props.Sets })
        }
      }

render(){
return( ... <div>this.state.Sets.length.toString()</div> ...)
}

【问题讨论】：

这个prevProps.Sets.length.toString() != this.props.Sets.toString() 似乎不正确
没有反应数组之类的东西
我并没有声称这是一个反应数组，反应出现在我的标题中以指示我正在使用的堆栈。

标签： javascript reactjs setstate

【解决方案1】：

React 不知道通过调用 destinationTopic["Sets"].push(change_set); 会改变另一个组件的状态。建议您的组件尽可能无状态，并且您的数据来自单一来源，然后沿着您的链传播。我建议查看Flux architecture，因为这将帮助您更好地了解数据如何在没有内部状态的情况下通过 React 流动。 Flux 的一种实现是Redux

如果您按照自己的方式设置变异状态，那么我建议您查看Mobx，因为您所拥有的内容可以使用 Mobx 商店开箱即用。

祝你好运

【讨论】：

感谢您的回复。到目前为止，切换到 Flux 架构已经解决了问题并解决了问题。

【解决方案2】：

Topics 数组变化，React 可以看到它更新，但它看不到数组中的单个项目更新，项目是对象，React 通过引用而不是内容比较对象，所以它看不到那里的变化。

例如destinationTopic 是一个对象。

【讨论】：