为什么在 setState 之后调用 getDerivedStateFromProps? [英] Why getDerivedStateFromProps is called after setState?

问题描述

React 引入了新的静态方法 getDerivedStateFromProps(props, state)，它在每个渲染方法之前调用，但为什么呢?在 prop 更改之后调用它对我来说很有意义但是在 setState 之后它没有，也许我错过了一些东西.

我根据我公司的要求创建了一个 datePicker 组件，组件的日期是由 prop 控制的.我在组件中有以下状态.

selectedDate: 数字；selectedMonth:数字；selectedYear:数字；当前月份:数字；当前年份:数字；视图:字符串；

selected 表示从 date prop 派生的选定日期，currentMonth 和 currentYear 表示当前日历视图中的月份和年份.

如果 date from prop 改变 selected*，currentMonth 和 currentYear 应该相应地改变.为此，我正在使用 getDerivedStateFromProps 但假设用户单击月份名称将日历视图切换到月份(而不是显示月份的日期名称)，该函数更新 currentMonth 为此使用 setState，但道具的日期与之前相同(包含上个月)，但 getDerivedStateFromProps 被调用并且 currentMonth 再次与之前相同而不是更改.>

是的，我在 state 中创建了一个额外的变量来跟踪是否由于 setState 而调用了 getDerivedStateFromProps 但我认为那不是正确的办法.

要么我做错了什么或遗漏了什么，要么在 setState 之后调用 getDerivedStateFromProps.可能我做错了什么.

解决方案

我做了这样的事情

构造函数(道具){超级(道具)；this.state = {扩展:props.expanded，自己的更新:假}}静态 getDerivedStateFromProps(props, state) {如果(state.ownUpdate){返回 {扩展:state.expanded，自己的更新:假};} else if (props.expanded !== state.expanded) {返回 {扩展: props.expanded};}返回空；}切换(){this.props.onAftePress(this.state.expanded, this.props.index);this.setState({扩展:！this.state.expanded，自己的更新:真的})}

React introduced new static method getDerivedStateFromProps(props, state) which is called before every render method, but why? Calling it after prop change makes sense to me but after setState it doesn't, maybe I am missing something.

I was creating a datePicker Component according to my company requirement, in the component date is controlled from the prop. I have the following state in the component.

selectedDate: number;
selectedMonth: number;
selectedYear: number;
currentMonth: number;
currentYear: number;
view: string;

selected represents selected date which is derived from date prop and currentMonth and currentYear represents month and year in the current calendar view.

If date from prop changes selected*, currentMonth and currentYear should be changed accordingly. For that, I am using getDerivedStateFromProps but let say user clicks on Month name which will switch calendar view to month (instead of dates name of the month will be shown), the function updates the currentMonth for this using setState, but date the prop is same as before (containing previous month) which should, but getDerivedStateFromProps is called and currentMonth is again as same as before instead of changing.

Right I creating an extra variable in state to track if getDerivedStateFromProps is called due to setState but I don't think that's the right way.

Either I am doing something wrong or missing something or getDerivedStateFromProps should not be called after setState. Probably I am doing something wrong.

解决方案

I did something like this

constructor(props) {
    super(props);
    this.state = {
        expanded: props.expanded,
        ownUpdate: false
    }
}

static getDerivedStateFromProps(props, state) {
    if (state.ownUpdate) {
        return {
            expanded: state.expanded,
            ownUpdate: false
        };
    } else if (props.expanded !== state.expanded) {
        return {
            expanded: props.expanded
        };
    }
    return null;
}

toggle() {
    this.props.onAftePress(this.state.expanded, this.props.index);
    this.setState({
        expanded: !this.state.expanded,
        ownUpdate: true
    })
}

这篇关于为什么在 setState 之后调用 getDerivedStateFromProps?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！