标签: getderivedstatefromprops

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

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

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

selected表示从日期道具派生的选定日期,currentMonth并currentYear表示当前日历视图中的月份和年份.

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

我正在创建一个额外的变量state来跟踪是否getDerivedStateFromProps被调用,setState但我不认为这是正确的方法.

无论是我做错了什么或丢失了什么或者getDerivedStateFromProps不应该被打电话setState.可能我做错了什么.

我创建了一个 React View，比如说MyView，它有 2 个文本输入，其初始值将由从数据库读取的父级传递。

我还希望将更改后的值保存回数据库。因此，视图也传递了一个回调函数。

考虑到数据库保存操作很繁重，您不应该经常执行它。因此，我决定监听onBlur事件，而不是每次击键时调用的onChange输入框上的事件。onChange

第一种方法：

class MyView extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
              <input type="url" value={this.props.values.A}
                   onBlur={(evt)=>{this.props.saveValue('A', evt.target.value)}} />
              <input type="url" value={this.props.values.B}
                   onBlur={(evt)=>{this.props.saveValue('B', evt.target.value)}} />         

              <button type="button" onClick={this.props.resetValues}>Reset</button>
            </div>
        );
     }
}

但是，这不起作用，因为React强制受控输入（带有value属性）始终伴随onChange侦听器。

第二种方法：

因此，我尝试将这些输入设为uncontrolled. 也就是说，value使用 代替属性defaultValue。

<input type="url" defaultValue={this.props.values.A}
       onBlur={(evt)=>{this.props.saveValue('A', evt.target.value)}} />

但这也不起作用，因为单击重置/清除按钮时，尽管视图已重新渲染，但defaultValue创建视图后不会更新。

第三种方法：

所以，我最终添加了一个onChange侦听器，但作为无操作。

<input …

我无法static在连接到 Redux 的类组件中使用方法。打字稿报告

Argument of type 'typeof SAI' is not assignable to parameter of type 'ComponentType<IStateProps & IDispatchProps>'.
  Type 'typeof SAI' is not assignable to type 'StatelessComponent<IStateProps & IDispatchProps>'.
    Type 'typeof SAI' provides no match for the signature '(props: IStateProps & IDispatchProps & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.

容器：

export interface IStateProps {
  saiList: ISaiList
}

const mapStateToProps = (state: IRootState) => ({
  saiList: SaiListSelector(state)
});

export interface IDispatchProps {
  getSai: () => Dispatch<AnyAction>; …

所以刚刚学会了componentWillReceiveProps已弃用,我们现在需要使用getDerivedStateFromProps生命周期方法. https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

我在下面使用它:

class Main extends Component {
  static getDerivedStateFromProps(props) {
    console.log('getDerivedStateFromProps', props);
    const { modal } = props;
    this.setState({ modal });
  }

  constructor(props) {
    super(props);

    this.state = {
      modal: {}
    };
  }

但是它出错了 setState

main.js:30未捕获的TypeError:无法在getDerivedStateFromProps(main.js:30)读取null的属性'setState'

我在这里错过了什么？