做出反应。无法在 getDerivedStateFromProps 中启动函数

Question

我不明白，为什么当我尝试在 getDerivedStateFromProps 方法中启动函数 getTodosList 时 - 它总是返回给我 TypeError - Cannot read property 'getTodosList' of null。

在我开始使用getDerivedStateFromProps 之后，我的函数也没有在componentDidMount 中启动...

我做错了什么？ (

import React, { Component } from 'react';
import {Doughnut} from 'react-chartjs-2';

class Chart extends Component {
    constructor(props) {
        super(props);

        this.state = {
            // some state...
    }

    getTodosList = (todos) => {
        console.log(todos);
        const all = [];
        const done = [];

        // some logic...

    }

    componentDidMount() {
        const { todos } = this.props.state.iteams;
        console.log('componentDidMount', todos);

        this.getTodosList(todos);
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        const { todos } = nextProps.state.iteams;
        console.log(this.getTodosList, prevState.datasets, 'componentWillReceiveProps', todos);

        this.getTodosList(todos); // TypeError: Cannot read property 'getTodosList' of null

    }

Answer 1

getDerivedStateFromProps 是类的静态属性（如前面的static 关键字所示）。这意味着它无权访问任何实例函数/属性。

将您的getTodosList 也声明为静态（如果它也不使用任何实例属性）然后调用Chart.getTodosList(todos)。

编辑：
如果您在getTodosList 中调用setState，则可以将其更改为返回状态对象，然后您可以根据调用函数返回的对象构造/更新您的状态。

例如。

static getTodosList = todos => {
  ...
  return { someState: someData }; //instead of this.setState({ someState });
}
static getDerivedStateFromProps() {
  ...
  return Chart.getTodosList(todos);
}

如果componentDidMount 与getDerivedStateFromProps 做同样的事情，您也不需要它。

Answer 2

getDerivedStateFromProps 是一个静态方法，它不会访问任何实例属性/方法，这意味着this 在该方法中不可用。

使用componentDidUpdate 对状态/道具更改执行您想要的操作。

您需要在 prevState/prevProps 与新值之间进行检查。

componentDidUpdate(prevProps, prevState, snapshot) {
   // compare this.state and prevState or compare the props values 
   // and perform the operation
}