반응 - useState 초기값이 설정되지 않음

반응 - useState 초기값이 설정되지 않음

훅을 사용하기 위해 리팩터링을 하고 있는데 매우 혼란스러운 벽에 부딪혔어요.

다음과 같은 기본적인 기능 컴포넌트가 있습니다.

export const MakeComponent = props => {
  const { path, value, info, update } = props;

  const [val, setVal] = useState(value);
  console.log(value, val); // abc undefined

 return (...)
}

로그가 반환되다abc undefined- 즉,value소품에서 분명히 정의되어 있지만, 첫 번째 논쟁은 에서 돌아왔다.useState(value)이undefined

후크가 제대로 작동하는지 테스트하기 위해useState("abc")그리고 그 로그는abc역시나

내가 뭘 잘못하고 있는지 전혀 모르겠어. 생각나는 거 없어?

리액트 버전:16.8.6

편집은 부모 컴포넌트입니다.여기서는 아무것도 없어요.

<MakeComponent
  path={key}
  value={item[key]}
  info={value}
  update={updateDiffs}
/>

댓글에서 언급했듯이useState(initialState)(혹은 당신이 뭐라고 부르든) 는initialState처음 렌더링할 때

초기 렌더링 중 반환된 상태(state)는 첫 번째 인수로 전달된 값과 동일합니다( ).initialState).

_{(React Docs, 강조)}

그 후 재렌더 시 useState 함수는 전달된 소품에 대한 새로운 변경에 따라 상태를 변경하지 않습니다.

매번 변경 내용을 반영하려면value변경, 입력 소품에 대한 효과를 다음과 같이 등록합니다.

export const MakeComponent = props => {
  const { path, value, info, update } = props;

  const [val, setVal] = useState(value);
  useEffect(() => { setVal(value)}, [value] )

 return (...)
}

---

MonsterBucket에서 알 수 있듯이 소품 변경에 직접 의존하여 재렌더를 트리거할 수 있습니다.

export const MakeComponent = props => {
  const { path, value, info, update } = props;

  const [val, setVal] = useState(value);
  if (val !== value) { // don't update unnecessarily
    setVal(value);
  }

 return (...)
}

대신 부작용(대부분 React 렌더링 사이클 외)을 위해 useEffect를 예약합니다.

이러한 예제를 보려면 ReactJs 문서를 참조하십시오. 다른 많은 예제를 포함하는 효과는 필요하지 않을 수 있습니다.

여기에 추가해야 합니다.useEffect소품 변경 상태를 갱신하고 싶은 경우, 소품 변경을 듣고 그에 따라 상태 값을 갱신합니다.

갱신된 스니펫입니다.

export const MakeComponent = props => {
     const { path, value, info, update } = props;
        
     const [val, setVal] = useState(value);
     useEffect(() => { setVal(value)}, [value] )
     return (<div>{val}</div>)
}

샌드박스 링크 연결 중

https://codesandbox.io/s/confident-agnesi-ohkq7?file=/src/MakeComponent.js

소품을 지날 때쯤이면value로.useState그 가치는 아직 정해지지 않았다. value그 자체가undefined아직.

또한.setState실제 동기화가 되지 않기 때문에useState와 같은 메커니즘을 사용합니다.setState당신의 주val로 설정되어 있지 않을 수 있습니다.value초기값으로 사용합니다.

이 경우 상태에 대한 초기 값으로 받침대를 사용하여 종속성이 없는 부작용을 사용해야 합니다.첫 번째 렌더링을 달성하면 효과가 실행되어 소품으로 상태를 설정합니다.컴포넌트의 초기값을 정의하지 않고 문제없이 전달할 수 있습니다.

export const MakeComponent = props => {
  const { path, value, info, update } = props;

  const [val, setVal] = useState();

  // get initial state after initial render
  useEffect(() => {
    setVal(value)
  }, [])
  console.log(value, val); // abc undefined then will log abc abc

 return (...)
}

React의 소품은 읽기 전용이며 상태는 읽기 및 쓰기 전용임을 명심하십시오.하지만 반패턴이 아니라 완벽하게 정상입니다. 만약 당신이 상태의 초기값으로 소품을 사용하고 그 후에 당신이 설정한 상태를 소품 대신 소품으로 사용한다면요.이것은 일관성을 유지하기 위한 것입니다. 왜냐하면 당신은 한 번에 두 가지 다른 값을 가질 수 있고 상황에 맞는 상태를 가질 수 있기 때문입니다.

위의 답변 중 하나에서 강조한 바와 같이, 고객의 요구에 따라 임의의 시점에서 소품 가치를 고려해야 할 경우가 있습니다.질문에는 그런 내용이 없습니다.그래도 이 경우 해당 소품으로 상태를 설정하는 효과의 종속 배열에 소품을 추가할 수 있습니다. 그리고 예, 원하는 다른 소품에도 동일한 효과를 쓸 수 있습니다.

데이터 기입이 필요 없는 경우는, 소품만을 사용하면, 최신 상태로 일관성이 유지됩니다.하지만 당신은 분명히 그렇게 하고 있기 때문에, 위에서 제시한 패턴이 나에게 맞는 것처럼 당신에게 효과가 있기를 바랍니다.

언급URL : https://stackoverflow.com/questions/58818727/react-usestate-not-setting-initial-value