在getDerivedStateFromProps中進行API調用后返回狀態

Question

我有一個反應組件，從其父級接收用於過濾的道具。 當父道具更改時，我在以下代碼中使用getDerivedStateFromProps中的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響應接收到的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
    )
  }
}