组件不会重新渲染状态更改后

Question

我有一个的按钮（功能和目标）两队的接口。当我从一个团队点击一个按钮，我想它去其他球队。我有反应，终极版实现这一点。我唯一的问题是，当状态更新和我控制台登录成功更新状态的组件不，除非我用forceUpdate（）。我不明白的是，既然国家已成功更新不应组件自动重新渲染？

Some.js

class Some extends React.Component{

    constructor(props){
        super(props)
        this.state = {
            selectedFeatures:[],
            selectedTargets:[]
        }
    }

    setStateFromProps(){
        this.setState({
            selectedFeatures: this.props.features,
            selectedTargets: this.props.targets,
        }, console.log(this.state.selectedFeatures, this.state.selectedTargets))
    }

    componentDidMount(){
        this.setStateFromProps()
    }

    render(){

        const { features, targets} = this.props

        const updateLists =(selectedFeature, flag) =>{
            let index
            if  (flag){
                index = features.indexOf(selectedFeature)
                features.splice(index, 1);

                targets.push(selectedFeature)

                this.props.addFeature({features, targets})
            }else{
                index = targets.indexOf(selectedFeature)
                targets.splice(index, 1);

                features.push(selectedFeature)
                this.props.addFeature({targets, features})
            }

            console.log(this.state.selectedFeatures, this.state.selectedTargets)


        }

        return (
            <div>
                {this.state.selectedFeatures.map(feature => {

                    return <div><button key={feature} onClick={() => updateLists(feature, true)}>{feature}</button> <br /></div>
                })}
                <br />
                {this.state.selectedTargets.map(target => {
                    return <div><button key={target} onClick={() =>updateLists(target, false)} >{target}</button> <br /></div>
                })}
            </div>
        );

    }
}

const mapDispatchToProps =(dispatch) =>{
    return {
            addFeature: (data) => dispatch(featureAddedToTargets(data)),
        }
} 
const mapStateToProps= (state)=>{
    return { selectedFeature:state.addFeatureReducer.selectedFeature,
            features: state.addFeatureReducer.features,
            targets: state.addFeatureReducer.targets
    };
}


export default connect(mapStateToProps, mapDispatchToProps)(Some);

正如你可以看到当我点击一个按钮，我触发updateLists功能，这将使计算的发送与更新的功能和目标按钮更改为我们唯一的行动，新的数据和动作将在减速机改变状态。

featureAddedToTargets行动

    export const featureAddedToTargets = (data) =>{
        return {
            type: FEATURE_CHANGED,
            data
        }
    }

addFeatureReducer

    const initialState = {
        features:['f1','f2','f3','f4','f5'],
        targets:['t1','t2']
    }

    const addFeatureReducer = (state=initialState, action) =>{
        switch(action.type){
            case FEATURE_CHANGED:
                console.log("action: ", action)
                return {...state , state, features: action.data.features, targets: action.data.targets};
            default: 
                return state;
        }
    }
export default combineReducers({ addFeatureReducer })

正如我所说的一些部件不重新渲染和按钮的团队保持不变，即使在初始化状态减速已发生变化，因此，在某些组件的道具也发生了变化。我想知道为什么会出现这种情况。

enter image description here

Answer 1

你火一个动作FEATURE_CHANGED后，你的减速机返回一个更新的状态，而这又是通过mapStateToProps你的阵营组件作为newProps传播。在渲染功能，你映射了this.state.selectedFeatures和this.state.selectedTargets。从我所看到的，现在看来，虽然你得到newProps features和targets，你是不是在你的组件的状态更新它们。您可以使用getDerivedStateFromProps生命周期的新道具到达时更新状态。

getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.features !== prevState.features && nextProps.targets !== prevState.targets) {
        return ({
           selectedFeatures: nextProps.features,
           selectedTargets: nextProps.targets
        });
    }
    else if (nextProps.features !== prevState.features) {
       return ({
           selectedFeatures: nextProps.features,
        });
    } else if (nextProps.targets !== prevState.targets) {
       return ({
           selectedTargets: nextProps.targets,
        });
    }
}

你可以参考一下这里：https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

Answer 2

setStateFromProps(){
        this.setState({
            selectedFeatures: this.props.features,
            selectedTargets: this.props.targets,
        }, console.log(this.state.selectedFeatures, this.state.selectedTargets))
    }

试试这个更改为

    componentDidUpdate(prevProps) {
        if(this.props.features !== prevProps.features || this.props.targets !== prevProps.targets) {
      this.setState({
            selectedFeatures: this.props.features,
            selectedTargets: this.props.targets,
        }, console.log(this.state.selectedFeatures, this.state.selectedTargets))
    }

}

Answer 3

所以我想，为什么组件没有更新，即使状态正在更新。看来，在updatedLists（）我使用push（）和拼接（）直接在终极版商店的功能和目标阵列从而变异我的状态。由于突变，该组件没有看到在当前和未来状态的改变。反应在内存中保持状态的两个版本 - 当前版本和下一个。它比较两个，只用已经更改的部分更新DOM。由于这样的事实，我是变异的状态，反应是看到当前和未来为相同的，所以它没有更新。所以，我只是改变了updatedLists（），我申请的随机变量，后来我的数据，我们的行动传递，传递他们的价值观与传播运营商（功能和目标）推（）和拼接（）（正如我们之前所做的那样）到商店（初始化状态）的状态。

if  (flag){
            index = this.state.selectedFeatures.indexOf(selectedFeature)
            const Features = [...this.state.selectedFeatures]
            Features.splice(index, 1);

            const Targets = [...this.state.selectedTargets]
            Targets.push(selectedFeature)

            console.log('features',features,'targets',targets)
            this.props.addFeature({features: Features , targets: Targets})
        }else{
            index = this.state.selectedTargets.indexOf(selectedFeature)
            const Targets = [...this.state.selectedTargets]
            Targets.splice(index, 1);

            const Features = [...this.state.selectedFeatures]
            Features.push(selectedFeature)

            console.log('features',features,'targets',targets)
            this.props.addFeature({ features:Features, targets: Targets})
        }