React：數組長度更改不會觸發子組件中的重新渲染

Question

在 React 中，我有一個主題列表，每個主題都有一個嵌套的集合列表。 主題呈現集合的長度和集合。 有時我需要將一組主題從一個主題移動到另一個主題。 我可以在正確移動后重新渲染設置，但設置長度不會在視覺上改變。 我相信這是改變狀態的一個問題，但我相信我在對它進行任何更改之前用 this.state.Topics.slice() 復制我的主題數組來彌補這一點。

主題列表.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> ...)
}

Answer 1

React 不知道通過調用destinationTopic["Sets"].push(change_set); 改變另一個組件的狀態。 建議您的組件盡可能無狀態，並且您的數據來自單一來源，然后沿着您的鏈傳播。 我建議查看Flux 架構，因為這將幫助您更好地理解數據如何在沒有內部狀態的情況下通過 React 流動。 Flux 的一種實現是Redux

如果您按照自己的方式設置了改變狀態，那么我建議您查看Mobx，因為您可以使用 Mobx 商店開箱即用。

祝你好運

Answer 2

Topics數組改變，React 可以看到它更新，但它看不到數組中的單個項目更新，項目是對象，React 通過引用而不是內容比較對象，所以它看不到那里的變化。

例如， destinationTopic是一個對象。