在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
}