반응 후크 - 사용 중 상태상태() 경로가 변경될 때 재설정되지 않음

반응 후크 - 사용 중 상태상태() 경로가 변경될 때 재설정되지 않음

const Create = () => {
  console.log('rerender !!')
  const [parcelType, setParcelType] = useState('paper')
  console.log('parcelType =', parcelType)

  return (
    <Container onClick={() => setParcelType('plastic')}>
      <BookingList />
      <Card title="Business">
        <p>Header</p>
      </Card>
    </Container>
  )
}

export default Create

Create 구성 요소에서 Container를 클릭할 때 specType 상태를 'plastic'으로 변경하고, 경로가 변경될 때 specType 상태를 'paper'로 재설정(Create component rerender ).그러나 구성 요소 재렌더 상태가 종이로 설정되지 않은 경우

자세한 내용: CreateComponent는 BoostingList 구성 요소의 경로가 변경될 때 다시 렌더링됨

 const BookingList = props => {
  const { id } = props.match.params
  const containerStyle = useTranslateSpring('-100px', '0')

  const itemList = items.map((item, idx) => {
    const itemStyle = useTranslateSpring('-100px', '0', '0', 200 + 200 * idx)
    const url = `/booking/${item.id}/create`

    return (
      <ItemContainer
        onClick={() => props.history.push(url)}
        style={itemStyle}
        key={item.id}
        isactive={id === item.id}
      >
        {item.id}
      </ItemContainer>
    )
  })
  return <Container style={containerStyle}>{itemList}</Container>
}

export default withRouter(BookingList)

구성 요소 만들기가 routeTemplate별로 경로에서 렌더링됨

const Routes = () => (
 <Router basename={process.env.REACT_APP_BASE_URL}>
   <> 
    <RouteTemplate
    exact
    path="/booking/:id/create"
    component={Booking.create}
    title="Booking"
    />
   </>
 </Router>
)

RouteTemplate는 PageTemplate 구성요소로 포장된 구성요소를 렌더링함

  const RouteTemplate = props => {
  const {
    component: Component,
    title,
    query,
    isAuthenticated,
    isLanding,
    ...rest
  } = props

  return (
    <Route
      {...rest}
      render={matchProps =>
        isAuthenticated ? (
          <PageTemplate title={title} isLanding={isLanding}>
            <Component {...matchProps} query={query} />
          </PageTemplate>
        ) : (
          <Redirect
            to={{
              pathname: '/',
              state: { from: props.location },
            }}
          />
        )
      }
    />
  )
}

경로가 변경되면 구성 요소의 상태를 재설정하십시오.

기능 구성 요소 + 후크 또는 명시적인 클래스 기반 구성 요소를 사용할 때마다 이 문제가 발생해야 함this.state그게 리액션이 어떻게 작동하는지 알아?

1. 이미 가지고 있는<Create>그 페이지에 게재된.
2. 경로 변경 후<Route>렌더링을 시도하다<Create>요소
3. React는 이미 존재하는 요소가 있다고 보고 재창조 대신 업데이트하려고 시도한다(일반적으로 업데이트는 재창조보다 훨씬 효율적이다).그렇기 때문에 상태가 리셋되지 않는다. 왜냐하면 업데이트하기 위해 리셋되지 않아야 하기 때문이다.

그것을 다루는 방법은 다양하다.

만약 그러한 사건이 외부로 발생할 경우.<Route>나는 상태를 재설정하기 위해 소품을 사용하는 것을 제안한다.그러나 을 위해<Route>그것은 더 명확하고/더 선명하게 교체하는 것을 의미할 것이다.<Route path="..." component={Create} />좀 더 완강하게<Route path="..." render={({match}) => <Create match={match} key={match.params.id} />}

그러니 대신 신청하자.useEffect후크를 한 번 눌러 상태를 재설정하십시오.props.match.params.id변경됨:

const Create = ({ match: {params: {id} } }) => {    

  useEffect(() => {
    setParcelType('paper');
  }, [id]);

그것은 계급 기반과 같아야 한다.

state = {
  typeOfWhatEver: 'paper'
};

componentDidUpdate(prevProps) {
  if(prevProps.match.params.id !== this.props.match.params.id) {
    this.setState({
      typeOfWhatEver: 'paper'
    });
  }
}

참조URL: https://stackoverflow.com/questions/55254269/react-hooks-state-in-usestate-is-not-reset-when-route-is-changed