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

Question

我有一个带有两组按钮（功能和目标）的界面。当我点击一个按钮时，我希望它从一个团队转到另一个团队。我正在用react和redux实现这一点。我唯一的问题是，当状态更新并且我成功地记录了更新的状态时，除非我使用forceUpdate（），否则组件不会更新。我不明白的是，既然状态更新成功，组件不应该自动重新渲染吗？

一些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函数，该函数将使计算更改为发送到我们的唯一操作带有更新的功能和目标按钮的新数据，该操作将更改reducer中的状态。

添加目标动作

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

附加特性减速器

    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 })

正如我所说的，尽管reducer中的初始状态发生了变化，因此某些组件中的道具也发生了变化，但Some组件不会重新渲染，按钮组保持不变。我想知道为什么会这样。

在此输入图像描述

Answer 1

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 2

启动动作功能\u CHANGED后，减速器将返回一个更新的状态，该状态将通过mapStateToProps作为newProps传播到React组件。在render函数中，您将映射到上。状态所选功能和此。状态所选目标。从我看到的情况来看，虽然您获得了新的道具功能和目标，但您并没有在组件的状态下更新它们。您可以使用getDerivedStateFromPropslifecycle在新道具到达时更新状态。

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 3

所以我明白了为什么即使状态在更新，组件也没有更新。似乎在updatedLists（）中，我直接在redux存储的功能和目标数组上使用了push（）和splice（），从而改变了我的状态。由于变异，该组件在当前和下一个状态中没有看到变化。React在内存中保留状态的两个版本—当前版本和下一个版本。它比较两者并仅使用已更改的部分更新DOM。由于我改变了状态，React将当前和下一个视为相同，因此没有更新。所以我刚刚更改了updatedLists（），我在随机变量（特性和目标）中应用了push（）和splice（），之后我将它们作为数据传递给我们的操作，并使用spread操作符（正如我们之前所做的）将它们的值传递到存储的状态（initialState）。

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})
        }