Question

我试图在更改属性后使用getDerivedStateFromProps()更新组件，但它不起作用。我已经读过某个地方，这个函数是同步的 - 如果是这样的话，有什么好办法呢？

static async getDerivedStateFromProps(props, prevState) {
  if (props) {
    let students = [];

    await this.getStudents({ class: props.classId })
      .then(res => students = res.result)
      .catch(err => {
        console.log(err)
      });

    return {
      students: students
    };
  }

  return null;
}

getStudents = async (params) => {
  const response = await fetch(apiRequestString.studentsByClass(params));
  const body = await response.json();

  if (response.status !== 200) throw Error(body.message);

  return body;
}

在Network标签中，我注意到根本没有调用getStudents()方法，因为没有路由请求。

这是元素的初始状态：

// State of the parent element; 'classId' has initial value of null
<Students classId={this.state.classId} />

Answer 1

这是一种静态方法。它无法访问this的Object实例。您可以通过使getStudents静态来修复它，然后通过引用类来使用它：

static async getStudents(params) {
  ...
}

await Students.getStudents({ class: props.classId })

Answer 2

事实证明我有一个旧版本的React。我将react-dom和^16.3.1的版本更新为componentDidUpdate()，现在一切正常。

P.S。我还必须使用getDerivedStateFromProps()，因为async componentDidUpdate(prevProps, prevState) { if (this.props.classId.length && prevProps.classId !== this.props.classId) { let students = []; await this.getStudents({ class: this.props.classId }) .then(res => students = res.result) .catch(err => console.log(err)); this.setState({ students: students }); } }是同步函数。

dtmtd2

更改属性后组件的异步更新

2 个答案: