Nextjs 문제 - {} 유형에 하위 속성이 존재하지 않습니다.

Question

저는 React와 Next.js를 사용하고 있습니다. 아래는 제 코드입니다. children 속성에 오류가 발생합니다. 오류 메시지는 {} 유형의 Property children입니다. 존재하지 않습니다

"다음"에서 { NextPage } 가져오기;
import { createContext, useContext, useReducer, Dispatch } from "react";

"../types"에서 { GlobalStatesType }을 가져옵니다.
"../reducers"에서 감속기, { ActionType,initialState }를 가져옵니다.

const StateContext 내보내기 = createContext<{
  상태: GlobalStatesType;
  디스패치: Dispatch<ActionType>
}>({
  상태: 초기 상태,
  파견: () =>
});


const StateProvider 내보내기: NextPage = ({ 하위 }) =>
  const [states, dispatch] = useReducer(reducer,initialState);

  반품 (
    <StateContext.Provider value={{ 상태, 디스패치 }}>
      { 어린이들 }
    </StateContext.Provider>
  );
};

내보내기 const useStatesValue = () => useContext(StateContext);

가져온 다음 함수의 컨텍스트에서 코드를 어떻게 작성하나요?

Answer 1

컨텍스트 공급자 구성 요소를 생성하기 위해 TypeScript 및 Next.js를 사용하고 있는 것 같습니다. "'{}' 유형에 '자식' 속성이 없습니다."라는 오류가 발생할 가능성은 TypeScript가 함수 구성 요소의 하위 속성을 인식하지 못하기 때문일 가능성이 높습니다.

이 문제를 해결하려면 StateProvider 구성 요소에서 하위 속성 유형을 명시적으로 정의할 수 있습니다. 방법은 다음과 같습니다:

으아악

StateProviderProps 유형을 정의하고 이를 사용하여 StateProvider 구성 요소의 하위 속성 유형을 지정하면 더 이상 하위 속성과 관련된 TypeScript 오류가 발생하지 않습니다.