반응 useState는 여기서 기본값을 허용하지 않는 것 같으십니까?

반응 useState는 여기서 기본값을 허용하지 않는 것 같으십니까?

특정 선을 표시하거나 숨길 수 있는 차트 구성요소가 있다.활성 상태인 라인을 추적하려면activeKeys차곡차곡 차다처음에는 함수에서 키 이름을 얻음getKeys데이터의 배열을 필요로 한다.

이 작업을 수행할 때:

    const defaultValue = getKeys(data)
    console.log('defaultValue from keys', defaultValue)
    const [activeKeys, setActiveKeys] = useState(defaultValue)
    console.log('activeKeys', activeKeys)

첫 번째 콘솔 로그에 올바른 키가 표시됨:

["createdCount", "confirmedCount", "hasFeedbackCount"]

두 번째 콘솔 로그 표시[]

하지만 내가 그렇게 한다면:

const defaultValue = ["createdCount", "confirmedCount","hasFeedbackCount"]
console.log('defaultValue', defaultValue)
const [activeKeys, setActiveKeys] = useState(defaultValue)
console.log('activeKeys', activeKeys)

첫 번째 콘솔 로그에 동일한 어레이가 표시됨:

["createdCount", "confirmedCount", "hasFeedbackCount"]

그리고 activeKeys올바른 배열 표시:

["createdCount", "confirmedCount", "hasFeedbackCount"]

이다useState고장난거나 뭐 그런거?By thegetKeys단순한 기능이지 약속 같은 건 없어다음과 같이 보인다.

const getKeys = (data: Props['data']): string[] => {
  const reduced = data.reduce((acc, datum) => [...acc, ...Object.keys(datum.lines)] as any, [])
  const setted = new Set(reduced)
  const arrayed = Array.from(setted)
  return arrayed
}

의 모양Props['data']다음과 같은 경우:

  data: {
    date: string
    lines: Partial<Record<string, number>>
  }[]

나도 같은 문제가 있었어.에 대한 버그는 없는 것이 맞다.React.useState.

여기서 문제는 구성 요소가 마운트되고 빈 배열을 기본값으로 계산한다는 것이다.이후 "기본값"이 예상 기본값으로 변경되지만React.useState이미 빈 배열의 기본값을 가지고 있다.

이 문제를 해결하려면 원하는 기본값을 사용할 수 있을 때까지 구성 요소를 장착하지 마십시오.또는 다음과 같은 작업을 수행할 수 있다.React.useEffect후크를 걸어 소품 변화를 찾고, 세터(배열의 두 번째 항목)를 호출한다.React.useState생산량

에 문제가 있는 것 같지 않다.useState.

대응 DOC에 따라:

State를 논쟁으로 사용하기 위해 우리는 무엇을 통과해야 하는가?

useState() 후크에 대한 유일한 인수는 초기 상태일 뿐이다.계급과 달리 국가는 대상이 될 필요가 없다. 우리가 필요한 것이 그것뿐이라면 숫자나 줄을 유지할 수 있다.이 예에서는 사용자가 몇 번 클릭했는지를 나타내는 숫자만 원하므로 변수의 초기 상태로 0을 전달하십시오.(두 개의 서로 다른 값을 주(state)에 저장하려면 useState()를 두 번 호출할 것이다.)

따라서 일련의 문자열을 초기 상태로 전달하는 것은 지극히 정상적이다.useState.함수의 결과라고 해도.(아래 코드 조각 참조).

나는 너의 것을 재현할 수 없었다.getKeys여기 SO snippet Editor에서 기능한다. 나는 당신이 그것을 더 자세히 조사하기를 제안한다.비록 이것이 일부 JS 기능을 지원하지 않을 수 있는 코드 조각 작성기에도 문제가 될 수 있다.

참고: 이 문제는useState뭔가 잘못되고 있어복제 중인 문제의 실제 사례를 제출해 보십시오.

function App() {
  
  const someFunction = (x) => {
    return x;
  }
  
  const data = ['A','B','C'];
  
  const [state,setState] = React.useState(someFunction(data));
  
  console.log(state);
  
  return(
    <div>{state.toString()}</div>
  );
}

ReactDOM.render(<App/>,document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

defaultValue 대신 useState()로 defe를 전달하고 있는 경우

const defaultValue = getKeys(data)
console.log('defaultValue from keys', defaultValue)
const [activeKeys, setActiveKeys] = useState(defaultValue)
console.log('activeKeys', activeKeys)

참조URL: https://stackoverflow.com/questions/56732123/react-usestate-does-not-seem-to-accept-a-default-value-here