Javascript React组件未按预期重新渲染

据我所知，当

props

发生更改时，组件将重新渲染，

componentWillMount

将在重新渲染之前运行。目前，我的构造函数和组件将按预期运行，但问题

prop

会发生更改，我需要更新用户分数状态，但问题prop中的此更改不会触发构造函数或组件安装。由于我不应该更新渲染函数中的状态（到目前为止，我唯一能够访问更新的问题

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 }

类FullTimeCoreContainer扩展组件{
建造师（道具：道具）{
超级（道具）
此.state={
userHomeScore:1，
userAwayScore:1
}
}
组件willmount（）{
getFTSAnswerStatus（this.props.question）。然后（foundScores=>{
if（foundScores.userHomeScore）{
这是我的国家({
userHomeScore:foundScores.userHomeScore，
userAwayScore:foundScores.userAwayScore
});
}
})
}
render（）{
const{option，question，questionIndex，user，configs，renderAs，shownextquestionafts，total}=this.props；
//检查问题是否处于活动状态
让组件类；
如果（问题[0]。激活）{
ComponentClass=FullTimeScoreActive；
}否则{
ComponentClass=FullTimeScoreLocked；
}
const changeScoreState=（团队，val）=>{
交换机（团队）{
案例“家”：
this.setState（（prevState）=>（{userHomeScore:prevState.userHomeScore+val}））；
打破
案例“离开”：
this.setState（（prevState）=>（{userAwayScore:prevState.userAwayScore+val}））；
打破
违约：
抛出新错误（“未识别的团队更改分数状态”）
}
}
const onClickCallback=（）=>{
const p=this.props；
const s=该状态；
p、 showNextQuestionafts（）；
p、 recordFullTimeScoreAnswer（s.userHomeScore、s.userAwayScore、p.question、p.questionIndex、p.user、p.configs）
}
返回(
)
}
}
常量mapStateToProps=状态=>{
返回{
configs:state.configs，
用户：state.user
};
}
功能图DispatchToprops（调度）{
返回bindActionCreators（{recordFullTimeScoreAnswer，ShowNextQuestionafts}，dispatch）；
};
导出默认连接（mapStateToProps、mapDispatchToProps）（FullTimeScoreContainer）；
导出{FullTimeScoreContainer}

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

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

---

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

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

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

---

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

componentWillMount

仅在第一次渲染之前运行。它不会在每次渲染之前运行。因此，即使您的

状态

和

道具

更新，

组件将不会再次被调用

构造函数
函数也是相同的

您可能正在寻找
组件WillReceiveProps
（）。当装载的组件即将接收新道具时，将调用此生命周期事件。您可以在此生命周期事件中更新您的
状态

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

附带说明：，您也不希望在
componentWillMount
中引入任何副作用或订阅。在
componentDidMount
中执行此操作。
componentWillMount
将仅在第一次渲染之前运行。它不会在每次渲染之前运行。因此，即使您的
状态
和
道具
更新，
组件将不会再次被调用

构造函数
函数也是相同的

您可能正在寻找
组件WillReceiveProps
（）。当装载的组件即将接收新道具时，将调用此生命周期事件。您可以在此生命周期事件中更新您的
状态

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

附带说明：，您也不希望在
componentWillMount
中引入任何副作用或订阅。在
componentDidMount
中执行此操作。
我不确定这个问题，但我认为您正在寻找
componentDidMount
componentDidMount将比
componentWillMount
更好使用。感谢各位的评论，我已经尝试了这两种方法，但都没有效果。当问题道具被更新时，构造函数和装载函数已经超过了它们的生命周期。我不确定这个问题，但我认为您正在寻找
componentDidMount
componentDidMount将比
componentWillMount
更好使用，谢谢大家的评论，我两个都试过了，但都不起作用。构造函数和挂载