[reactjs] 부모 상태 변경 후 React 자식 구성 요소가 업데이트되지 않음

Program / 글쓴이

다양한 하위 구성 요소에 데이터를 채우기 위해 멋진 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')
);

그러나 어떤 이유로 부모 상태가 변경 될 때 자식 구성 요소가 업데이트되지 않는 것 같습니다.

여기에 뭔가 빠졌나요?

답변

코드에 두 가지 문제가 있습니다.

자식 구성 요소의 초기 상태는 소품에서 설정됩니다.

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

이 SO 응답 에서 인용 :

초기 상태를 구성 요소에 전달하는 prop것은 안티 패턴입니다. 왜냐하면 getInitialState(우리의 경우 생성자) 메서드는 구성 요소가 처음 렌더링 될 때만 호출 되기 때문 입니다. 더 이상. 즉, 다른 값을로 전달하는 해당 구성 요소를 다시 렌더링하면 구성 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/

도움이 되었기를 바랍니다.

답변