ReactJS에서 별도의 파일에서 useState의 값을 업데이트하는 방법은 무엇입니까?

Question

두 개의 서로 다른 파일에서 개체 상태에 액세스하고 업데이트하려고 합니다. 각 파일에 대해 로컬 useState를 사용하면 이를 변경할 수 있지만 작동하지 않습니다.

사용자 정의 후크와 로컬 상태를 사용하여 다양한 솔루션을 시도했지만 그 중 어느 것도 내 문제를 해결하지 못했습니다. 이 문제로 약 5시간 동안 갇혀 있었고 정말 미칠 지경이었습니다. 어떤 도움이라도 주시면 감사하겠습니다.

제 생각에 문제는 return 문에서 후크를 호출하려고 하는데, 그것이 렌더링되는 곳이기 때문에 다른 방법이 생각나지 않는다는 것입니다.

information.js:

<button class="active" onClick={() => useSetHero(hero)}>

hero.js:

export const useSetHero = (newHero) =>
    const UpdateHero = () =>
        const [hero, setHero] = useState(newHero);
        setHero(newHero);
    };

    { UpdateHero }를 반환합니다.

}

현재 받고 있는 오류 메시지는 다음과 같습니다. 콜백 함수에서는 React Hook "useHero"를 호출할 수 없습니다. React Hooks는 React 함수 구성요소 또는 사용자 정의 React Hook 함수에서 호출되어야 합니다

Answer 1

후크 내부 기능이 아닌 후크 자체에 대한 상태를 정의하세요. 예:

으아악

여기서 initialHero和newHero의 차이점도 참고해주세요. 전자는 후크가 처음 호출될 때 첫 번째 상태 값을 초기화하는 데 사용됩니다.

으아악

그리고 후자는 UpdateHero를 호출할 때 새로운 값으로 업데이트하는 데 사용됩니다:

으아악

위 코드에서는 마크업에서 직접 후크를 호출하지 않는다는 점에 유의하세요. 후크는 구성 요소 초기에 호출됩니다(그리고 동일한 후크는 모든 렌더링에서 동일한 순서로 호출됩니다). 후크에서 반환된 데이터 및/또는 함수는 나중에 사용할 수 있습니다.

---

몇 가지 참고 사항:

1. 여기에서는 사용되지 않습니다hero. 후크도 사용할 수 있도록 해당 값을 반환해야 한다고 생각합니다.
2. UpdateHero在这里是多余的，您可以直接返回setHero여기서는 중복되므로 setHero를 반환하면 됩니다.

저는 이 두 가지 질문이 모두 여러분이 하려는 작업에 대한 매우 간단한 예일 뿐이고 실제 후크는 이보다 더 복잡하기 때문이라고 가정합니다. 그러나 이러한 문제를 고려하지 않으면 위 후크를 다음과 같이 단순화할 수 있습니다.

으아악