루트 파라미터 변경 또는 쿼리 변경 시 React가 컴포넌트 데이터를 새로고침하지 않음

루트 파라미터 변경 또는 쿼리 변경 시 React가 컴포넌트 데이터를 새로고침하지 않음

링크가 있는 "홈" 컴포넌트가 있으며 링크를 클릭하면 제품 컴포넌트가 제품에 로드됩니다.또한 "최근 방문한 제품"에 대한 링크를 항상 볼 수 있는 다른 컴포넌트도 있습니다.

이러한 링크는 제품 페이지에서 작동하지 않습니다.링크를 클릭하면 URL이 업데이트되고 렌더가 발생하지만 제품 구성요소가 새 제품으로 업데이트되지 않습니다.

다음 예제를 참조하십시오.Codesandbox 예제

index.js 루트는 다음과 같습니다.

<BrowserRouter>
  <div>
    <Route
      exact
      path="/"
      render={props => <Home products={this.state.products} />}
    />

    <Route path="/products/:product" render={props => <Product {...props} />} />

    <Route path="/" render={() => <ProductHistory />} />

    <Link to="/">to Home</Link>
  </div>
</BrowserRouter>;

Product History의 링크는 다음과 같습니다.

<Link to={`/products/${product.product_id}`}> {product.name}</Link>

그래서 그것들은Route path="/products/:product".

제품 페이지에서 ProductHistory 링크를 따라가려고 하면 URL 업데이트와 렌더가 발생하지만 구성 요소 데이터는 변경되지 않습니다.Codesandbox 예제에서는 제품 구성 요소 렌더 함수의 알림을 주석 해제하여 링크를 따라가면 렌더링되지만 아무 일도 일어나지 않습니다.

뭐가 문제인지...문제를 설명하고 해결책을 찾을 수 있나요?그거 참 잘됐네요!

와 함께componentDidMount또, 의 실장도 필요합니다.componentWillReceiveProps또는 사용getDerivedStateFromProps(v16.3.0 이후) inProducts같은 컴포넌트이기 때문에re-rendered최신 정보params그리고.not re-mounted경로 매개 변수를 변경할 때 이는 매개 변수가 구성요소로 전달되고, 소품 변경 시 반응 구성요소가 다시 렌더링되고 다시 장착되지 않기 때문입니다.

편집: v16.3.0부터를 사용하여 프로포트를 기반으로 상태를 설정/갱신합니다(두 가지 라이프 사이클 방식으로 지정할 필요가 없습니다).

static getDerivedStateFromProps(nextProps, prevState) {
   if (nextProps.match.params.product !== prevState.currentProductId){
      const currentProductId = nextProps.match.params.product
      const result = productlist.products.filter(obj => {

        return obj.id === currentProductId;

      })
     return {

        product: result[0],
        currentId: currentProductId,
        result

      }
  }
  return null;
}

v16.3.0 이전 버전에서는 componentWillReceiveProps를 사용했습니다.

componentWillReceiveProps(nextProps) {
    if (nextProps.match.params.product !== this.props.match.params.product) {
      const currentProductId = nextProps.match.params.product
      const result = productlist.products.filter(obj => {

        return obj.id === currentProductId;

      })
      this.setState({

        product: result[0],
        currentId: currentProductId,
        result

      })
    }
  }

작업 코드 및 상자

제품 컴포넌트는 이미 로드되어 있기 때문에 새로고침되지 않습니다.아래 구성 요소 방법으로 새 제품 ID를 처리해야 합니다.

componentWillReceiveProps(nextProps) {
if(nextProps.match.params.name.product == oldProductId){
  return;
}else {
 //fetchnewProduct and set state to reload
}

최신 버전의 react 사용(16.3.0 이후)

static getDerivedStateFromProps(nextProps, prevState){
   if(nextProps.productID !== prevState.productID){
     return { productID: nextProps.productID};
  } 
  else {
     return null;
  }
}

componentDidUpdate(prevProps, prevState) {
  if(prevProps.productID !== this.state.productID){
     //fetchnewProduct and set state to reload
  }
}

상기의 모든 방법이 효과가 있지만, 나는 사용할 필요가 없다고 생각한다.getDerivedStateFromProps리액트 문서에 따르면 "프롭이 변경되었을 때만 일부 데이터를 재계산하려면 메모 도우미를 사용하십시오."

대신, 여기에서는, 간단하게 사용할 것을 제안합니다.componentDidUpdate의 변경과 함께Component로.PureComponenet.

React 문서를 참조하면PureComponenet적어도 1개의 상태 또는 프로포트의 값이 변경되었을 경우에만 재렌더됩니다.변경은 상태 키와 프로펠러 키를 얄팍하게 비교하여 결정됩니다.

  componentDidUpdate = (prevProps) => {
    if(this.props.match.params.id !== prevProps.match.params.id ) {
      // fetch the new product based and set it to the state of the component
   };
  };

위의 내용은 컴포넌트를 Pure Component로 변경한 경우에만 사용할 수 있으며 React에서 Import해야 합니다.

않은 「」를 사용할 수 .componentDidUpdategetDerivedStateFromProps:

  componentDidUpdate(prevProps) {
    const { match: { params: { value } } } = this.props
    if (prevProps.match.params.value !== value){
      doSomething(this.props.match.params.value)
    }
  }

언급URL : https://stackoverflow.com/questions/48139281/react-doesnt-reload-component-data-on-route-param-change-or-query-change