props 改变后，React 应该什么时候调用 AJAX request？

Question

我曾经在 ComponentWillReceiveProps()

道具改变后调用 AJAX

componentWillReceiveProps(nextProps) {
    if(nextProps.foo !== this.props.foo){
       //fetch & call this.setState() asynchronously
    }
}

在 React 16.3 之后 ComponentWillReceiveProps() 将在未来被弃用。有一个新函数 getDerivedStateFromProps 而不是 ComponentWillReceiveProps()，但我无法异步更新状态。

static getDerivedStateFromProps(nextProps, prevState) {
    // I can't get access to this.props but only state

    if(nextProps.foo !== this.props.foo){
       //fetch & call this.setState() asynchronously
    }

    // I can only return a state but update it after an AJAX request
    return {}
}

执行此操作的最佳做法是什么。

Answer 1

进行异步调用的最佳位置是componentDidUpdate(prevProps, prevState, snapshot) {}。 getDerivedStateFromProps 是静态方法，因此它无法访问组件实例（无法访问 this）

Answer 2

您不应使用 getDerivedStateFromProps 生命周期进行 api 调用。相反，使用 componentDidUpdate 进行 api 调用，并在收到 api 响应后执行 this.setState。另外正如另一个答案所指出的，您不能在静态方法中使用 this。

componentDidUpdate(prevProps) {
    if (this.props.myData !== prevProps.myData) {
      this.callMyApi();
    }
}

callMyApi() {
  fetch("/api")
    .then(response => {
      this.setState({ ... });
    })
}

如果你正在写新的组件，你也可以考虑写一个Functional组件并使用useState和useEffect来触发api当propis更新时调用

像这样：

...
  const {page} = this.props;
  const [images, setImages] = useState([]);

  useEffect(() => {
    fetch(`/myfavApi`)
      .then(data => data.json())
      .then(images => {
        setImages(images.concat(images));
      });
  }, [page]); // provide page(prop) as dependency. 
  ...

props 改变后，React 应该什么时候调用 AJAX request？

When should React call AJAX request after props change?

reactjs

react-lifecycle