React Component未按预期重新呈现[重复]

Question

据我了解，当props 发生更改时，组件将重新渲染，componentWillMount 应在重新渲染之前运行。目前我的构造函数和componentWillMount 按预期运行，但随后问题prop 发生变化，我需要更新用户分数状态，但问题道具的这种变化不会触发构造函数或componentWillMount。由于我不应该更新渲染函数中的状态（到目前为止我唯一能够访问更新的问题prop 的地方），我怎样才能让反应在它的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 只会在 first 渲染之前运行。它不会在 每个 渲染之前运行。因此，即使您的state 和props 更新，componentWillMount 也不会再次被调用。

constructor 函数也一样。

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

请注意，componentWillReceiveProps 仅适用于 已安装 组件。因此，它不会在你的组件第一次收到它的初始 props 时被调用。

附注：Per the docs，您也不想在componentWillMount 中引入任何副作用或订阅。改为在componentDidMount 中执行此操作。

Answer 2

我想添加评论，但我没有足够的声誉...

当 props 发生变化时，组件将重新渲染

据我了解，您无法更改道具，因此组件会在状态更改时重新渲染。