javascript - React 组件未按预期重新渲染

Question

这个问题已经有答案了:

Reactjs - Setting State from props using setState in child component (2 个回答)

已关闭 5 年前。

据我了解，当 props 发生变化时，组件将重新渲染。和componentWillMount应在重新渲染之前运行。目前我的构造函数和 componentWillMount按预期运行，但问题是 prop我需要更新用户分数状态的更改，但问题属性中的此更改不会触发构造函数或 componentWillMount 。由于我不应该更新渲染函数内的状态(迄今为止我能够访问更新的问题 prop 的唯一地方)，我怎样才能让 react 识别它的 props 中的这种变化？然后更新状态？希望这是可以理解的。

这是我的容器

class FullTimeScoreContainer extends Component<Props, State> {

    constructor(props: Props) {
        super(props)
        this.state = {
            userHomeScore: 1,
            userAwayScore: 1
        }
    }

    componentWillMount() {
        getFTSAnswerStatus(this.props.question).then(foundScores => {
            if ( foundScores.userHomeScore ) {
                this.setState({
                    userHomeScore: foundScores.userHomeScore,
                    userAwayScore: foundScores.userAwayScore
                });
            }
        })
    }

    render() {
        const { option, question, questionIndex, user, configs, renderAs, showNextQuestionAfterFTS, total} = this.props;

        // check if question is active or not
        let ComponentClass;
        if ( question[0].active ) {
            ComponentClass = FullTimeScoreActive;
        } else {
            ComponentClass = FullTimeScoreLocked;
        }

        const changeScoreState = (team, val) => {
            switch (team) {
                case "home":
                    this.setState( (prevState) => ({ userHomeScore: prevState.userHomeScore + val }) );
                    break;
                case "away":
                    this.setState( (prevState) => ({ userAwayScore: prevState.userAwayScore + val }) );
                    break;
                default:
                    throw new Error("unrecognised team to change score state")
            }
        }

        const onClickCallback = () => {
            const p = this.props;
            const s = this.state;
            p.showNextQuestionAfterFTS();
            p.recordFullTimeScoreAnswer(s.userHomeScore, s.userAwayScore, p.question, p.questionIndex, p.user, p.configs)
        }

        return (
            <ComponentClass
                imgSrc={imgSrc}
                user={user}
                answerStatus={answerStatus}
                question={question}
                onClickCallback={onClickCallback}
                questionIndex={questionIndex}
                total={total}
                configs={configs}
                userScores={this.state}
                changeScoreState={changeScoreState}
            />
        )
    }
}

const mapStateToProps = state => {
    return {
        configs: state.configs,
        user: state.user
    };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ recordFullTimeScoreAnswer, showNextQuestionAfterFTS }, dispatch);
};

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

export { FullTimeScoreContainer }

Answer 1

componentWillMount 只会在第一次渲染之前运行。它不会在每次渲染之前运行。因此，即使您的 state 和 props 更新，componentWillMount 也不会再次被调用。

构造函数函数也相同。

您可能正在寻找componentWillReceiveProps ( see docs )。当 mounted 组件即将接收新的 props 时，会调用此生命周期事件。您可以在此生命周期事件中更新您的状态。

请注意，componentWillReceiveProps 仅适用于已安装组件。因此，当您的组件第一次收到其初始属性时，它不会被调用。

附注:Per the docs ，您也不希望在 componentWillMount 中引入任何副作用或订阅。请在 componentDidMount 中执行此操作。