Дочерний компонент React не обновляется после изменения родительского состояния

Я пытаюсь создать хороший компонент ApiWrapper для заполнения данных в различных дочерних компонентах. Из всего, что я прочитал, это должно сработать: https://jsfiddle.net/vinniejames/m1mesp6z/1/

class ApiWrapper extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      response: {
        "title": 'nothing fetched yet'
      }
    };
  }

  componentDidMount() {
    this._makeApiCall(this.props.endpoint);
  }

  _makeApiCall(endpoint) {
    fetch(endpoint).then(function(response) {
      this.setState({
        response: response
      });
    }.bind(this))
  }

  render() {
    return <Child data = {
      this.state.response
    }
    />;
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.data
    };
  }

  render() {
    console.log(this.state.data, 'new data');
    return ( < span > {
      this.state.data.title
    } < /span>);
  };
}

var element = < ApiWrapper endpoint = "https://jsonplaceholder.typicode.com/posts/1" / > ;

ReactDOM.render(
  element,
  document.getElementById('container')
);

Но по какой-то причине кажется, что дочерний компонент не обновляется при изменении родительского состояния.

Я что-то упустил?

В вашем коде есть две проблемы.

Начальное состояние вашего дочернего компонента устанавливается из props.

this.state = {
  data: props.data
};

Цитата из этого ответа SO :

Передача начального состояния компоненту в качестве a propявляется анти-шаблоном, потому что метод getInitialState(в нашем случае констуктор) вызывается только при первом отрисовке компонента. Никогда больше. Это означает, что если вы повторно визуализируете этот компонент, передав другое значение как a prop, компонент не будет реагировать соответствующим образом, потому что компонент сохранит состояние с первого раза, когда он был визуализирован. Это очень подвержено ошибкам.

Так что, если вы не можете избежать такой ситуации, идеальным решением будет использовать этот метод componentWillReceivePropsдля прослушивания новых свойств.

Добавление приведенного ниже кода к вашему дочернему компоненту решит вашу проблему с повторным рендерингом дочернего компонента.

componentWillReceiveProps(nextProps) {
  this.setState({ data: nextProps.data });  
}

Вторая проблема связана с расширением fetch.

_makeApiCall(endpoint) {
  fetch(endpoint)
    .then((response) => response.json())   // ----> you missed this part
    .then((response) => this.setState({ response }));
}

А вот и рабочая скрипка: https://jsfiddle.net/o8b04mLy/

Есть кое-что, что вам нужно изменить.

Когда fetchполучите ответ, это не json. Я искал, как мне получить этот json, и обнаружил эту ссылку .

С другой стороны, вы должны думать, что constructorфункция вызывается только один раз.

Итак, вам нужно изменить способ получения данных в <Child>компоненте.

Здесь я оставил пример кода: https://jsfiddle.net/emq1ztqj/

Надеюсь, это поможет.