[reactjs] React.useState는 props에서 상태를 다시로드하지 않습니다.

Program / 글쓴이

props 변경시 상태가 다시로드 될 것으로 예상하지만 이것이 작동하지 않고 user다음 useState호출에서 변수가 업데이트되지 않습니다 . 무엇이 잘못 되었습니까?

function Avatar(props) {
  const [user, setUser] = React.useState({...props.user});
  return user.avatar ?
         (<img src={user.avatar}/>)
        : (<p>Loading...</p>);
}

코드 펜

답변

useState에 전달 된 인수는 클래스 구성 요소의 생성자에서 상태를 설정하는 것과 매우 유사한 초기 상태이며 다시 렌더링 할 때 상태를 업데이트하는 데 사용되지 않습니다.

소품 변경시 상태를 업데이트하려면 useEffect후크를 사용하십시오.

function Avatar(props) {
  const [user, setUser] = React.useState({...props.user});

  React.useEffect(() => {
      setUser(props.user);
  }, [props.user])

  return user.avatar ?
         (<img src={user.avatar}/>)
        : (<p>Loading...</p>);
}

작업 데모

답변

useState변수에 초기 값을 설정 하는 데 사용 하는 기능적 구성 요소는 초기 값을 props를 통해 전달하면 useEffect후크를 사용하지 않을 때까지 항상 동일한 초기 값을 설정합니다 .

예를 들어 당신의 경우 이것은 당신의 일을 할 것입니다

 React.useEffect(() => {
      setUser(props.user);
  }, [props.user])

useEffect에 전달 된 함수는 렌더링이 화면에 커밋 된 후에 실행됩니다.

기본적으로 효과는 완료된 모든 렌더링 후에 실행되지만 특정 값이 변경된 경우에만 실행하도록 선택할 수 있습니다.

React.useEffect(FunctionYouWantToRunAfterEveryRender)

useEffect에 하나의 인수 만 전달하면 렌더링 할 때마다이 메서드가 실행 FunctionYouWantToRunAfterEveryRender됩니다. useEffect에 두 번째 인수를 전달 하여이 메서드를 실행할시기를 결정할 수 있습니다.

React.useEffect(FunctionYouWantToRunAfterEveryRender, [props.user])

당신은 지금 [props.user]을 통과하고 통지으로 useEffect만이 실행됩니다 FunctionYouWantToRunAfterEveryRender기능을 할 때 props.user변경

이해에 도움이 되었기를 바랍니다. 개선이 필요한 경우 알려주세요.

답변

전달 된 매개 변수는 React.useState()해당 상태의 초기 값일뿐입니다. React는 상태 를 변경 하는 것으로 인식하지 않고 기본값 만 설정합니다. 처음에는 기본 상태를 설정 한 다음 조건부로을 호출 setUser(newValue)하여 새 상태로 인식하고 구성 요소를 다시 렌더링 할 수 있습니다.

지속적으로 업데이트되는 것을 막기 위해 어떤 조건없이 상태를 업데이트하는 것이 좋습니다. 따라서 props를받을 때마다 다시 렌더링하는 것이 좋습니다. 상태 기능을 부모 구성 요소에 게양하고 부모의 상태를이 아바타에 소품으로 전달하는 것을 고려할 수 있습니다.

답변

Hooks에 대한 ReactJS 문서에 따르면 :

그러나 구성 요소가 화면에있는 동안 친구 소품이 변경되면 어떻게됩니까? 우리 구성 요소는 다른 친구의 온라인 상태를 계속 표시합니다. 이것은 버그입니다. 또한 unsubscribe 호출이 잘못된 친구 ID를 사용하므로 마운트 해제시 메모리 누수 또는 충돌이 발생합니다.

여기서 유일한 상호 작용은 작동하지 않는 것으로 보이는 소품 변경에서 발생해야합니다. (여전히 문서에 따르면) componentDidUpdate (prevProps)를 사용하여 props에 대한 업데이트를 사전에 포착 할 수 있습니다.

추신 : 판단 할 코드가 충분하지 않지만 Avatar (props) 함수 내에서 적극적으로 setUser ()를 설정할 수 없습니까?

답변

반응 세계에서 이러한 경우 componentWillRecieveProps (nextProps) 함수에서 상태를 업데이트해야합니다.

답변