Javascript 在reactjs中使用useReducer从文件中获取数据时出现问题

我对reactjs和useState和useReducer都是新手。我有一个文件中的数据，我想从该文件中获取数据。我可以用useState来做，但是当我想用useReducer做的时候，我会得到一个错误。另一件有趣的事情是，如果我在useReducer的初始状态中插入相同的数据，它就会工作并显示数据。 下面是代码和数据文件

dataOnFile.js（我要从中获取数据的文件）

globalContext.js（使用上下文在其他组件中使用它，在这里我使用的是useState，通过使用useState它工作正常，它接受项作为初始状态）

import React，{createContext，useReducer，useState}来自“React”；
从“/dataOnFile”导入项目；
导出常量GlobalContext=createContext（）；
导出功能GlobalProvider（道具）{
const[items，setItems]=使用状态（items）；
返回(
{props.children}
);
}

GlobalContext.js（通过使用useReducer，我得到一个错误，它不接受项作为初始状态） ReferenceError:无法在初始化之前访问“项”

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

import React，{createContext，useReducer，useState}来自“React”；
从“/dataOnFile”导入项目；
导出常量GlobalContext=createContext（）；
功能项还原器（项、动作）{
返回；
}
导出功能GlobalProvider（道具）{
const[Items，itemsDispatch]=useReducer（itemsReducer，Items）；
返回(
{props.children}
);
}

globalContext.js（如果我将数据放在useReducer的初始状态，它就会工作）

import React，{createContext，useReducer，useState}来自“React”；
从“/dataOnFile”导入项目；
导出常量GlobalContext=createContext（）；
功能项还原器（项、动作）{
返回；
}
导出功能GlobalProvider（道具）{
const[Items，itemsDispatch]=useReducer（itemsReducer[
{
id:1，
姓名：“艾哈迈德”，
状态：正确，
},
{
id:2，
姓名：“谢拉兹”，
状态：正确，
},
]);
返回(
{props.children}
);
}

我认为这里的问题在于，您将

项

作为减速器的状态、初始状态和减速器中的参数。注意，useReducer调用钩子，这是您想要传递初始状态的地方

在组件中尝试以下操作：

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

（请注意，该州名称中没有大写字母“I”）

在减速器中：

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

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

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

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