cari

Rumah  >  Soal Jawab  >  teks badan

Isu Nextjs - Anak harta tidak wujud pada jenis {}

<p>Saya menggunakan React dan Next.js, di bawah ialah kod saya, ia menimbulkan ralat pada atribut <code>children</code>, mesej ralat ialah <strong>Property children dalam jenis {} tidak wujud</strong></p> <pre class="brush:php;toolbar:false;">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<ActionType>; }>({ menyatakan: initialState, penghantaran: () => }); export const StateProvider: NextPage = ({ children }) => const [states, dispatch] = useReducer(reducer, initialState); kembali ( <StateContext.Nilai pembekal={{ states, dispatch }}> { kanak-kanak } </StateContext.Provider> ); }; eksport const useStatesValue = () => <p>Bagaimanakah saya boleh menulis kod dalam konteks fungsi seterusnya yang saya import? </p>
P粉658954914P粉658954914455 hari yang lalu588

membalas semua(1)saya akan balas

  • P粉495955986

    P粉4959559862023-08-17 10:03:15

    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.

    balas
    0
  • Batalbalas