Question

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

我的keepData（）方法出现错误。

×
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>
);

}
}

我只想调用一次以上函数。调用我的keepData（）方法时出现错误，它正在转向无限循环。

Answer 1

您可以使用生命周期方法componentDidMount（）在组件安装时加载数据，然后使用触发事件在页面上呈现数据

ggplot(df, aes(a-axis, y-axis), color=indicator)) + 
  geom_quasirandom(groupOnX=TRUE, na.rm = TRUE) +
  labs(title= 'chart', x='x-axis', y= 'y-axis') +
  scale_color_manual(name = 'indicator', values=c("#99ccff","#000000" ))

Answer 2

 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（）即可！而且我能够改变状态。

Answer 3

我不知道您要完成什么，但这是行不通的。您不能像这样（没有任何触发器或条件）调用在渲染组件内部调用setState的函数。在这里，当调用函数this.retainData()时，该函数将更改状态，而在React中，当状态更改时，将重新呈现组件。因此，在这里，每次渲染后都会调用您的函数，并且由于您设置了状态，因此React将重新渲染，并且该函数将再次被调用，然后再次设置状态，React将重新渲染，依此类推。

Answer 4

将两个函数-prevState，retainData插入生命周期方法componentDidMount

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

4 个答案: