Isu Nextjs - Anak harta tidak wujud pada jenis {}

Question

Saya menggunakan React dan Next.js, di bawah ialah kod saya, ia menimbulkan ralat pada atribut children, mesej ralat ialah Property children dalam jenis {} tidak wujud

import { NextPage } daripada "next";
import { createContext, useContext, useReducer, Dispatch } daripada "react";

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

eksport const StateContext = createContext<{
  menyatakan: GlobalStatesType;
  penghantaran: Dispatch;
}>({
  menyatakan: initialState,
  penghantaran: () =>
});


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

  kembali (
    
      { kanak-kanak }
    
  );
};

eksport const useStatesValue = () =>
Bagaimanakah saya boleh menulis kod dalam konteks fungsi seterusnya yang saya import? 
            

Answer 1

Nampaknya anda menggunakan TypeScript dan Next.js untuk mencipta komponen penyedia konteks. Ralat "Kanak-kanak' Harta tidak wujud pada jenis '{}'" yang anda hadapi berkemungkinan besar kerana TypeScript tidak mengenali sifat kanak-kanak dalam komponen fungsi.

Untuk menyelesaikan masalah ini, anda boleh mentakrifkan secara eksplisit jenis atribut kanak-kanak dalam komponen StateProvider. Begini caranya:

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);

Dengan mentakrifkan jenis StateProviderProps dan menggunakannya untuk menentukan jenis harta kanak-kanak dalam komponen StateProvider, anda tidak lagi akan menghadapi ralat TypeScript yang berkaitan dengan harta kanak-kanak.