时间戳

首页 > 解决方案 > 我无法在 React.js 中更改状态对象的状态

javascript - 我无法在 React.js 中更改状态对象的状态

问题描述

我正在更改状态对象的状态，但出现上述错误，即使我没有使用任何生命周期方法。这是我得到的错误：-

我的 retainData() 方法出现错误。

×
Error: Maximum update depth exceeded. This can happen when a component
 repeatedly calls setState inside componentWillUpdate or componentDidUpdate.
 React limits the number of nested updates to prevent infinite loops.

 const price = this.state.animeObject.price;
  118 |    const genre = this.state.animeObject.genre;
  119 | 
> 120 |    this.setState({
      | ^  121 |      animeName: animeName,
  122 |      animeDirector: animeDirector,
  123 |      animeStudio: animeStudio,
View compiled

131 | 
  132 |  render() {
  133 |    return (
> 134 |      <div>
      | ^  135 |        {this.prevState()}
  136 |        {this.retainData()}
  137 |        <h1> The Data going to be Edited :-</h1>

下面是我的代码！


export default class EditAnimeList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      animeName: "",
      animeStudio: "",
      animeDirector: "",
      rating: "",
      genre: "",
      price: "",
      animeObject: {},
    };
    this.prevState = this.prevState.bind(this); // show the data to be edited
    this.retainData = this.retainData.bind(this);
  }


  prevState(event) {
    const path = window.location.pathname.split("/");
    const id = path[path.length - 1];
    const anime = {
      id: id,
    };

    console.log("THE IDD is", id);

    axios
      .post("http://localhost:5000/anime/find", anime)
      .then((res) => {
        this.setState({
          animeObject: res.data,
        });
      })
      .catch((err) => console.log(err));
  }


retainData() {
    console.log("anime director is", this.state.animeObject.animeDirector);
    const animeName = this.state.animeObject.animeName;
    const animeDirector = this.state.animeObject.animeDirector;
    const animeStudio = this.state.animeObject.animeStudio;
    const rating = this.state.animeObject.rating;
    const price = this.state.animeObject.price;
    const genre = this.state.animeObject.genre;

    this.setState({
      animeName: animeName,
      animeDirector: animeDirector,
      animeStudio: animeStudio,
      rating: rating,
      price: price,
      genre: genre,
    });

    console.log("anime director is (submit )", this.state.animeDirector)
  }

render() {
    return (
      <div>
        {this.prevState()}
        {this.retainData()}
</div>
);

}
}

我只想调用一次上述函数。当我调用我的 retainData() 方法时出现错误，它正在变成一个无限循环。

标签： javascriptreactjsreact-router

解决方案

 constructor(props) {
    super(props);
    this.state = {
      animeName: "",
      animeStudio: "",
      animeDirector: "",
      rating: "",
      genre: "",
      price: "",
      animeObject: {},
    };
    this.prevState = this.prevState.bind(this); // show the data to be edited
    this.retainData = this.retainData.bind(this);
    this.prevState();

  }
 componentDidMount() {
    setTimeout(() => {
      this.retainData();
   }, 500)
  }

刚刚创建了一个带有 setTimeout 函数的 componentDidMount() ！我能够改变状态。

推荐阅读