Question

从URL中获取ID，然后调用API，但在调用API并将接收到的数据设置为ComponentDidUpdate状态后进入无限循环

class Category extends Component {
  state = {
    data: [],
  };

  async componentDidUpdate(prevState) {
    let id = this.props.match.params.category;
    console.log(this.state.data);
    console.log(id);
    if (prevState !== this.state.data) {
      let catData = await axios.get(
        `https://jsonplaceholder.typicode.com/posts/${id}`
      );
      console.log("api", catData);
      this.setState({
        data: catData,
      });
    }
  }

  render() {
    console.log(this.state.catData);
    return <div className="category"></div>;
  }
}

export default Category;

Answer 1

prevState !== this.state.data将永远是正确的，因此我认为您可以将代码更改为此：

class Category extends Component {
  state = {
    data: [],
  };

  async componentDidUpdate(prevProps, prevState) {
    let id = this.props.match.params.category;
    console.log(this.state.data);
    console.log(id);
    if (prevState.data !== this.state.data) {
      let catData = await axios.get(
        `https://jsonplaceholder.typicode.com/posts/${id}`
      );
      console.log("api", catData);
      this.setState({
        data: catData,
      });
    }
  }

  render() {
    console.log(this.state.catData);
    return <div className="category"></div>;
  }
}

export default Category;

如何停止componentDidUpdate无限循环

1 个答案: