React.useState는 소품에서 상태를 새로고침하지 않습니다.

React.useState는 소품에서 상태를 새로고침하지 않습니다.

소품 변경 시 상태 새로고침이 예상되지만 이 방법은 작동하지 않습니다.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>);
}

작업 데모

이 질문에 대한 거의 모든 답변이 잘못된 패턴을 촉진하는 것을 보았습니다. 즉, 콜 내에서 프로포트가 변경되어 상태가 갱신되는 것입니다.그useEffect후크는 React 구성 요소를 외부 시스템과 동기화하는 데 사용됩니다.리액트 상태를 동기화하기 위해 사용하면 잠재적으로 버그가 발생할 수 있습니다(다른 효과로 인해 재렌더가 발생하면 의도하지 않은 상태 업데이트가 발생할 수 있습니다).더 나은 해결책은 이 문제를 해결하기 위해key변화를 추진하다<Avatar />상위 구성 요소:

// App.jsx
function App() {
   // ...logic here
   return <Avatar initialUser={user} key={user.id} />
}

// Avatar.jsx
function Avatar({ initialUser }) {
 // I suppose you need this component to manage it's own state 
 // otherwise you can get rid of this useState altogether.
  const [user, setUser] = React.useState(initialUser);
  return user.avatar ? (
    <img src={user.avatar} />
  ) : (
    <p>Loading...</p>
  );
}

그렇게 생각해도 좋다key이 경우 useEffect의 의존관계 어레이로 제안되지만 예기치 않은 결과로 인해 의도하지 않은 상태 변경이 발생하지는 않습니다.useEffect컴포넌트 렌더링에 의해 트리거된 콜.

자세한 내용은 이쪽에서 보실 수 있습니다: Puts to State

자세한 것은 이쪽useEffect여기 발총이 있을 수도 있어요.

효과가 필요 없는 경우가 있다

사용하는 기능 컴포넌트useState초기값을 우리의 변수로 설정하기 위해, 만약 우리가 소품을 통해 초기값을 전달한다면, 그것은 당신이 그것을 사용하지 않을 때까지 항상 같은 초기값을 설정할 것이다.useEffect후크,

예를 들어 당신의 경우 이것은 당신의 일을 할 수 있을 것이다.

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

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

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

React.useEffect(FunctionYouWantToRunAfterEveryRender)

useEffect에 인수를 하나만 전달하면 렌더링할 때마다 이 메서드가 실행됩니다.FunctionYouWantToRunAfterEveryRenderuseEffect에 두 번째 인수를 전달하여

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

아시다시피, 저는 지금 [http.user]를 지나가고 있습니다.useEffect이것만 발사할 것이다.FunctionYouWantToRunAfterEveryRender할 때 기능하다props.user변경되어 있다

이것이 당신의 이해에 도움이 되기를 바랍니다. 개선 사항이 있으면 알려주세요.

이를 위한 사용자 정의 간단한 후크를 만들 수 있습니다.훅이 변경되었을 때 디폴트값이 변경되었습니다.

https://gist.github.com/mahmut-gundogdu/193ad830be31807ee4e232a05aeec1d8

    import {useEffect, useState} from 'react';

    export function useStateWithDep(defaultValue: any) {
      const [value, setValue] = useState(defaultValue);
    
      useEffect(() => {
        setValue(defaultValue);
      }, [defaultValue]);
      return [value, setValue];
    }

#예시

const [user, setUser] = useStateWithDep(props.user);

다음과 같은 커스텀 훅을 작성했습니다.

const usePrevious = value => {
   const ref = React.useRef();

   React.useEffect(() => {
       ref.current = value;
   }, [value]);

   return ref.current;
}

const usePropState = datas => {
    const [dataset, setDataset] = useState(datas);
    const prevDatas = usePrevious(datas);

    const handleChangeDataset = data => setDataset(data);

    React.useEffect(() => {
        if (!deepEqual(datas, prevDatas)) // deepEqual is my function to compare object/array using deep-equal
            setDataset(datas);
    }, [datas, prevDatas]);

    return [
        dataset,
        handleChangeDataset
    ]
}

사용 방법:

const [state, setState] = usePropState(props.datas);

변수가 되었습니다.React.useState()는 그 상태의 초기값일 뿐입니다.React는 상태를 변경하는 것으로 인식하지 않고 기본값만 설정합니다.처음에 기본 상태를 설정한 후 조건부로 호출할 수 있습니다.setUser(newValue)새로운 상태로 인식되어 컴포넌트를 다시 설정합니다.

어떤 조건 없이 상태를 갱신할 것을 권장하며, 따라서 소품을 받을 때마다 재렌더링을 합니다.상태 기능을 부모 컴포넌트로 끌어올려 부모 상태를 이 아바타에 전달하는 것을 고려해 보는 것이 좋습니다.

리액트에 따르면후크에 관한 JS 매뉴얼:

하지만 컴포넌트가 화면에 뜨는 동안 친구 소품이 바뀌면 어떻게 되나요?컴포넌트는 다른 친구의 온라인 상태를 계속 표시합니다.이것은 버그입니다.또, 언마운트시에 메모리 누전이나 크래시가 발생합니다.이는 서브스크라이브 해제 콜에 잘못된 친구 ID가 사용되기 때문입니다.

여기서의 유일한 상호작용은 소품 변경에서 일어나야 하는데, 효과가 없는 것 같습니다.문서에 따르면 componentDidUpdate(prevProps)를 사용하여 프로 액티브하게 소품 업데이트를 가져올 수 있습니다.

PS: 판단하기에 충분한 코드는 없지만, Avatar(props) 함수 내에서 User()를 적극적으로 설정할 수 없을까요?

언급URL : https://stackoverflow.com/questions/54865764/react-usestate-does-not-reload-state-from-props