在reactjs中使用useReducer從文件中獲取數據的問題

Question

我是 reactjs 的新手，正在使用 useState 和 useReducer。 我在文件中有數據，我想從該文件中獲取數據。 我可以用 useState 來做，但是當我想用 useReducer 來做時，我得到一個錯誤。 另一個有趣的事情是，如果我在 useReducer 的初始狀態中插入相同的數據，它會工作並顯示數據。 下面是代碼和數據文件。

dataOnFile.js（我想從中獲取數據的文件）

const dataOnFile = [
{
    id: 1,
    name: "ahmad",
    status: true,
},
{
    id: 2,
    name: "john",
    status: true,
},
{
    id: 3,
    name: "sara",
    status: true,
},
];
export default dataOnFile;

globalContext.js（使用上下文在其他組件中使用它，在這里我使用 useState 並且通過使用 useState 它工作正常，它接受 Items 作為初始狀態）

import React, { createContext, useReducer, useState } from "react";
import Items from "./dataOnFile";

export const GlobalContext = createContext();

export function GlobalProvider(props) {
const [items, setItems] = useState(Items);
return (
    <div>
        <GlobalContext.Provider value={[items, setItems]}>
            {props.children}
        </GlobalContext.Provider>
    </div>
);
}

GlobalContext.js（通過使用 useReducer，我得到一個錯誤，它不接受 Items 作為初始狀態） ReferenceError：無法在初始化之前訪問“Items”

import React, { createContext, useReducer, useState } from "react";
import Items from "./dataOnFile";

export const GlobalContext = createContext();

function itemsReducer(Items, action) {
return <div></div>;
}

export function GlobalProvider(props) {
const [Items, itemsDispatch] = useReducer(itemsReducer, Items);

return (
    <div>
        <GlobalContext.Provider value={[Items, itemsDispatch]}>
            {props.children}
        </GlobalContext.Provider>
    </div>
);
}

globalContext.js（如果我將數據放在 useReducer 的初始狀態，它會起作用）

import React, { createContext, useReducer, useState } from "react";
import Items from "./dataOnFile";

export const GlobalContext = createContext();

function itemsReducer(Items, action) {
return <div></div>;
}

export function GlobalProvider(props) {
const [Items, itemsDispatch] = useReducer(itemsReducer, [
    {
        id: 1,
        name: "ahmad",
        status: true,
    },
    {
        id: 2,
        name: "sheeraz",
        status: true,
    },
]);

return (
    <div>
        <GlobalContext.Provider value={[Items, itemsDispatch]}>
            {props.children}
        </GlobalContext.Provider>
    </div>
);
}

Answer 1

我認為這里的問題是您將Items作為減速器的狀態、初始狀態和減速器中的參數。 請注意， useReducer 調用鈎子，這是您想要傳遞初始狀態的地方。

在組件中試試這個：

const [items, itemsDispatch] = useReducer(itemsReducer, Items);

（請注意，該州名中沒有大寫“I”）

這在減速器中：

const itemsReducer = (state, action) => {
// Do stuff
}