Question

我有一个react组件，可以从其父对象接收要过滤的道具。当父母的道具发生变化时，我会在孩子的以下代码中使用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不是正确的生命周期挂钩。您需要将获取代码放入componentDidMount和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
    )
  }
}

在getDerivedStateFromProps中进行API调用后返回状态

1 个答案: