Реагировать на получение новых данных в componentDidUpdate

Question

У меня есть компонент, который получает список новостей от двух или трех API. при первом рендеринге компонента вызывается apis и данные отображаются в componentDidMount что-то вроде этого:

componentDidMount() {
        this.state.platforms.forEach((platform, i) => {
            let objToSend = {
                phrase: this.props.searchParams.phrase,
                // this is the main place when input data changes
                ...this.props.searchParams.general_params,
                ...this.props.searchParams.platforms[i].api_params,
                stringPath: platform,
                apiPath: this.props.searchParams.platforms[i].apiPath,
            }
            this.props.loadData(objToSend)
            // this is the api call using redux which sends data as props to this component
 }

После изменения фразы я хочу, чтобы этот компонент повторно отобразил и повторно запустил componentDidMount, но он не работает, потому что componentDidMount запустится один раз. Поэтому я использовал componentDidUpdate, но, поскольку есть несколько вызовов, API постоянно обновляется.

Как сделать так, чтобы компонент повторно отображался и повторно запускал componentDidMount при каждом изменении фразы

Answer 1

Вы можете использовать componentDidUpdate аргументы (previousProps, previousState) проверить, произошли ли какие-то новые изменения.

пример

componentDidUpdate(previousProps, previousState) {
    if (previousProps.phrase !== this.props.phrase) {
        //Do whatever needs to happen!
    }
}

Таким образом я остановил бесконечный цикл для своей ситуации.

Answer 2

Вот один из способов сделать something() когда вы делаете рендер

import React, { Component } from 'react';
import { render } from 'react-dom';

const fakeFetch = (n) => {
  console.log(`Doing fake fetch: ${n}`)
  return n
}

class App extends Component {
  state = {
    value: false,
    number: 0,
  }

  componentDidMount() {
    const number = fakeFetch(this.state.number + 1);
    this.setState({ number })
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.value !== this.state.value) {
      const number = fakeFetch(this.state.number + 1);
      this.setState({ number })
    }
  }

  toggle = () => {
    this.setState(({ value }) => ({ value: !value }))
  }

  render() {
    return (
      <React.Fragment>
        <h1>Number: {this.state.number}</h1>
        <button onClick={this.toggle}>re-render</button>
      </React.Fragment>
    );
  }
}

render(<App />, document.getElementById('root'));

Живой пример тут.