如何避免 React.js 中的这种无限更新循环？

Question

I have a parent component that has an index property in its state. When the index changes, I want it to pass new data to a child component in its props.

When the child component receives new data, I want it to make an AJAX call to update its own state. I cannot use componentDidUpdate() because this method runs when props or state changes. So, I basically get this happening:

1. Parent passes new props
2. Child runs componentDidUpdate()
3. Child runs fetchFromServer() , which updates state
4. Child runs componentDidUpdate()
5. To infinity...

Is there a method for example that only runs when a component's props are updated?

Parent Component

export default class ResultsFrame extends Component {

  constructor(props) {
    super(props);

    this.state = {
      
      resultIndex: 0,

    }
  }

  render() {

    return (

        <SequenceView data={this.props.results.results[this.state.resultIndex]}/>

    );
  }
}

Child Component

export default class SequenceView extends Component {

  constructor(props) {
    super(props);

    this.state = {
      data: {},
      isLoading: true,
    }

  }

  render() {

    if(this.state.isLoading)
    {
      return ( <Spinner /> );
    }
    else
    {
      return (
        <div>

          {/* Render relevant stuff... */}

        </div>
      );
    }

  }

  componentDidMount()
  {
    this.fetchFromServer();
  }

  componentDidUpdate()
  {
    this.fetchFromServer();
  }

  fetchFromServer = () =>
  {
    const sendData = {
      data: this.props.data,
    };

    axios.post(`/analysis/seqview`, sendData)
      .then(res => {
        const response = res.data;
        console.log(response);
        this.setState({data: response, isLoading: false});
      })
      .catch(function (e) {
        console.log(e.response.data.message);
      });
  }
}

Answer 1

From the documentation

You may call setState() immediately in componentDidUpdate() but note that it must be wrapped in a condition like in the example above, or you'll cause an infinite loop.

This is exactly what you are doing here. your componentDidUpdate calls fetchFromServer which sets the state.

You need to change your componentDidUpdate to

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.data.something !== prevProps.data.something) {
    this.fetchFromServer();
  }
}

Refer:

https://reactjs.org/docs/react-component.html#componentdidupdate