Question

据我了解，当props发生变化时，组件将重新渲染，componentWillMount将在重新渲染之前运行。目前我的构造函数和componentWillMount按预期运行，但随后问题prop更改了我需要更新用户得分状态，但此问题的更改不会触发构造函数或componentWillMount。因为我不应该更新渲染函数中的状态（到目前为止我唯一能够访问更新的问题prop），我怎样才能做出反应来识别它的变化＆＃ 39; s 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也不会再次被调用。

constructor功能也一样。

您可能正在寻找componentWillReceiveProps（see docs）。当已安装组件即将接收新道具时，将调用此生命周期事件。您可以在此生命周期事件中更新state。

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

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

Answer 2

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

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

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

React Component无法按预期重新呈现

2 个答案: