如果我嘗試在 axios 中 setState 在 React 中捕獲錯誤，我會收到無限量的 GET 404 錯誤

Question

我正在嘗試在 Axios React 的 catch 承諾中設置狀態，它可以工作，但我收到了無限數量的請求和 404 錯誤。

class Search extends Component {
  state = {
    notFound: false,
    dataResult: "",
  };

  componentDidUpdate() {
    axios
      .get("url")
      .then((resp) => {
        this.setState({ dataResult: resp.data });
      })
      .catch((err) => {
        if (err.response.status === 404) {
          this.setState({ notFound: true });
        }
      });
  }

  render() {
    return (
      <div>
        {this.state.notFound ? <div>NOTFOUND</div> : null}
      </div>
    );
  }
}

控制台結果（URL 是一個 API）：

GET "url" 404 (Not Found) GET "url" 404 (Not Found) GET "url" 404 (Not Found) ...

Answer 1

您可以在 componentDidUpdate() 中立即調用 setState() 但請注意，它必須包含在類似於上面示例中的條件中，否則會導致無限循環。

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.url !== prevProps.url) {
    this.fetchData(this.props.userID);
  }
}

Answer 2

如果您需要調用 axios，在某些輸入狀態更改時，您需要使用某種條件包裝該調用，以便僅在輸入狀態實際更改時才調用它。 componentDidUpdate方法是用先前的狀態對象調用的。 因此，您可以將以前的狀態與當前狀態進行比較，以確保狀態確實發生了變化。

componentDidUpdate(prevProps, prevState) {
  if(prevState.myInputState !== this.state.myInputState) {
    axios
      .get("url")
      .then((resp) => {
        this.setState({ dataResult: resp.data });
      })
      .catch((err) => {
        if (err.response.status === 404) {
          this.setState({ notFound: true });
        }
      });
  }
}