javascript - 在 getDerivedStateFromProps 内部调用 API 后返回状态

Question

我有一个反应组件，它接收从其父级过滤的道具。当父道具更改时，我getDerivedStateFromProps在以下代码中使用子道具：

static getDerivedStateFromProps(props, state) {
  if (props.filter === null) {
     return state;
  }

  const { name, description } = props.filter;

  ApiService.get("cards", { name: name, description: description })
    .then(response => {
      console.log("get request returned ", response.data);

      return { cards: response.data };
    }
  );
}

在控制台中，response.data日志是适当的对象数组。但是状态不会更新，渲染函数仍然使用旧cards数组，而不是从ApiService响应中接收到的数组。如何使cards数组正确更新，以便在下一次渲染时显示过滤后的卡片？

Answer 1

getDerivedStateFromProps不是正确的生命周期钩子。您需要将获取代码放入componentDidMountand中componentDidUpdate，并this.setState在数据可用时使用。

class Example extends React.Component {
  constructor(props) {
    super(props); 
    this.state = {
      cards: null,
    }
  }

  componentDidMount() {
    this.loadData();
  }

  componentDidUpdate(prevProps) {
    if (this.props.filter !== prevProps.filter) {
      this.loadData();
    }
  }

  loadData() {
    const { name, description } = this.props.filter;

    ApiService.get("cards", { name: name, description: description })
      .then(response => {
        this.setState({ cards: response.data });
      });
  )

  render() {
    if (!this.state.cards) {
      return <div>Loading...</div>
    }

    return (
      // some jsx using the cards
    )
  }
}