javascript - react 。无法在 getDerivedStateFromProps 中启动函数

Question

我不明白，为什么当我尝试在 getDerivedStateFromProps 方法中启动函数 getTodosList - 它总是向我返回 TypeError - Cannot read property 'getTodosList' 为 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 做同样的事情，您也不需要它。