'useState' 후크를 사용할 때 React DevTools를 사용하여 React 다중 상태의 '필드' 이름을 볼 수 있는 방법이 있습니까?

'useState' 후크를 사용할 때 React DevTools를 사용하여 React 다중 상태의 '필드' 이름을 볼 수 있는 방법이 있습니까?

리액트 훅을 배우고 실험하고 있습니다.Chrome에서 React DevTools를 사용하여 컴포넌트의 현재 상태 값을 검사하면 상태는 정상이지만 실제 '필드'는 개인에 의해 업데이트되는 상태 변수입니다.useState후크 - 연관된 이름이 없습니다.대신 몇 개의 현이나 몇 개의 부란 등이 보입니다.일반적으로 무슨 일이 일어나고 있는지 알 수 있지만 문제가 있는 것 같습니다. 상태 변수의 이름이 무엇인지 확인할 수 있으면 좋겠습니다.

예를 들어, 제가 이런 걸핏하면

const [doughnuts, setDoughnuts] = useState(24)

React DevTools에서 보면 그냥 'number: 24'가 아니라 'dougnts: number: 24'와 같은 것을 보고 싶습니다.

이 기능을 활성화하기 위한 설정이나 기술이 부족한가요?

마침내 반응팀이 우리의 말을 들었다.

react dev tools 옵션에서 커스텀 후크를 해석하는 최근 도입이 도움이 될 수 있습니다.
.

해석 전(커스텀훅카드의 매직버튼을 클릭하기 전)

.

해석 후(오른쪽 상단에 있는 매직버튼 클릭)

다른 답변에서는 언급되지 않은 접근법:

1. 다음을 사용합니다. (Oleh 권장)

const [{ item }, setItem] = useState({ item: 2 });

포장할 수도 있습니다.useState초기값의 모양에 따라, 이 함수는setItem이 함수는 전달된 값 자체에서 올바른(정확한) 모양을 가진 개체로 자동 추출을 반환합니다.

2. 신규 작성useStateWithLabel기능:

function useStateWithLabel(initialValue, name) {
    const [value, setValue] = useState(initialValue);
    useDebugValue(`${name}: ${JSON.stringify(value)}`);
    return [value, setValue];
}

베이스는,useDebugValue여기서 설명하는 기능.

사용방법:

const [item, setItem] = useStateWithLabel(2, "item");

당신은 아무것도 놓치고 있지 않고 이 행동을 바꿀 수 없습니다.이것이 React가 여러 상태를 처리하는 방법입니다.

https://reactjs.org/docs/hooks-rules.html#explanation 를 참조해 주세요.

이 문제를 회피하는 한 가지 방법은 모든 데이터를 포함한 단일 상태를 작성하는 단일 상태 후크를 사용하는 것입니다.

const [state, setState] = useState({doughnuts: 24, key1: 'value1', key2: 'value2'});

이 경우 상태는 단일 객체에 저장되며 각 값은 키와 관련지어집니다.

이것 좀 보세요.상태 변수를 하나 또는 여러 개 사용해야 합니까?

복합 상태는 관리하기 어렵지만 이를 지원하는 툴이 있습니다.useReducer Hook

다음 작업을 수행할 때

const [item, setItem] = useSate(2)

있어요destructuring assignment an array keyobject ''를 alias의 첫 .useState

const [item, setItem] = useState({value: 2})

볼 수 있을 거예요.value: 2특정 시점의 후크의 현재 상태를 반영하기 때문입니다.

마다 현재 중인 내에서 가 되기 ( " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " "item는, 되지만, 「 」가 「 」, 「 」가 「 」, 「 」가 「 」는, 「 」가 되는 것은 .React참조가 동일한 식별자를 사용하고 있습니다.

하시면 됩니다.useDebugStateuse-named-state 패키지에서 훅합니다.

import { useDebugState } from "use-named-state";
const App = () => {
  const [counter, setCounter] = useDebugState("counter", 0);

  return <button onClick={(prevCount) => prevCount + 1}>{counter}</button>;
};

으로는 「」를 사용하고 있습니다.useDebugValue react)

언급URL : https://stackoverflow.com/questions/57659640/is-there-any-way-to-see-names-of-fields-in-react-multiple-state-with-react-dev