Nextjs-Problem – Untergeordnete Eigenschaften sind für Typ {} nicht vorhanden

Question

Ich verwende React und Next.js. Unten ist mein Code. Er löst einen Fehler im Attribut children aus. Die Fehlermeldung lautet Propertychildren im Typ {}. existiert nicht

import { NextPage } from "next";
import { createContext, useContext, useReducer, Dispatch } from „react“;

import { GlobalStatesType } from "../types";
import Reducer, { ActionType, initialState } aus „../reducers“;

export const StateContext = createContext<{
  Zustände: GlobalStatesType;
  Versand: Dispatch<ActionType>;
}>({
  Staaten: initialState,
  Versand: () =>
});


export const StateProvider: NextPage = ({children }) =>
  const [States, Dispatch] = useReducer(reducer, initialState);

  zurückkehren (
    <StateContext.Provider value={{ states, distribution }}>
      { Kinder }
    </StateContext.Provider>
  );
};

export const useStatesValue = () => useContext(StateContext);

Wie schreibe ich den Code im Kontext der nächsten Funktion, die ich importiert habe?

Answer 1

看起来你正在使用TypeScript和Next.js创建一个上下文提供者组件。你遇到的错误"属性'children'在类型'{}'上不存在"，很可能是因为TypeScript在函数组件中无法识别children属性。

要解决这个问题，你可以在StateProvider组件中显式定义children属性的类型。以下是如何做到这一点：

import { NextPage } from "next";
import { createContext, useContext, useReducer, Dispatch, ReactNode } from "react"; // 导入ReactNode类型

import { GlobalStatesType } from "../types";
import reducer, { ActionType, initialState } from "../reducers";

type StateProviderProps = {
  children: ReactNode; // 定义children属性的类型
};

export const StateContext = createContext<{
  states: GlobalStatesType;
  dispatch: Dispatch<ActionType>;
}>({
  states: initialState,
  dispatch: () => {},
});

export const StateProvider: NextPage<StateProviderProps> = ({ children }) => { // 使用StateProviderProps类型
  const [states, dispatch] = useReducer(reducer, initialState);

  return (
    <StateContext.Provider value={{ states, dispatch }}>
      {children} {/* 直接使用children */}
    </StateContext.Provider>
  );
};

export const useStatesValue = () => useContext(StateContext);

通过定义StateProviderProps类型并使用它来指定StateProvider组件中children属性的类型，你将不再遇到与children属性相关的TypeScript错误。