javascript 如何使用React Context在数组中保存数组?“类型错误:无法读取未定义的属性(阅读'Keywords')”

rur96b6h  于 2023-05-05  发布在  Java
关注(0)|答案(1)|浏览(130)

我发出了一个fetch请求,它返回了一个JSON和一个文档数组,在文档数组中,我得到了另一个“关键字”数组。我可以用React Context保存Documents数组,但在尝试保存Keywords数组时出现错误。我得到的错误如下:“Uncaught(in promise)TypeError:无法读取undefined的属性(阅读'Keywords')"。
这是我得到的响应的一个例子,所以你可以看到JSON的结构:

下面是我的代码:
jsx -〉这里是我发出获取请求的地方。

import { useEffect } from "react";
import { useWorkViewContext } from "../hooks/useWorkViewContext";

function Dashboard({ user }) {
  const { workview, keywords, dispatch } = useWorkViewContext();

  useEffect(() => {
    const fetchWorkView = async () => {
      const credentials =
        import.meta.env.VITE_SERVICE_USER +
        ":" +
        import.meta.env.VITE_SERVICE_PASSWORD;
      const response = await fetch(
        "https://urlforfetch.com",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Basic ${credentials}`,
          },
          body: JSON.stringify({
            WorkViewApplication: "VAPR",
            WorkViewClassName: "Policy",
            WorkViewFilter: "All Policy Record",
            SearchAttributes: [
              {
                Name: "InsuranceCarrier",
                Value: "MAPFRE",
              },
            ],
          }),
        }
      );
      const json = await response.json();

      if (response.ok) {
        localStorage.setItem("workview", JSON.stringify(json.Documents));
        localStorage.setItem(
          "keywords",
          JSON.stringify(json.Documents[0].Keywords)
        );
        dispatch(
          { type: "SET_WORKVIEW", payload: json.Documents },
          {
            type: "SET_KEYWORDS",
            payload: JSON.stringify(json.Documents[0].Keywords),
          }
        );
      }
    };

    if (user) {
      fetchWorkView();
    }
  }, [dispatch, user]);

  return (
    <main>
      <div className="dashboard">
        <h1>
          Welcome back, <span className="accent">{user.username}</span>
        </h1>
        <div className="grid-sm">
          <div className="grid-sm">
            <p>In this section you will find you cases information.</p>
          </div>
          <div className="grid-lg">
            <h2>My Cases</h2>
            {workview && workview.length > 0 && (
              <div className="grid-md">
                {workview.map((document, index) => (
                  <>
                    <a key={index} href={document.DocumentURL}>
                      {document.DocumentName}
                    </a>
                  </>
                ))}
              </div>
            )}
            {keywords && keywords.length > 0 && (
              <div className="grid-md">
                {keywords.map((keyword, index) => (
                  <>
                    <a key={index}>{keyword.Name}</a>
                  </>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </main>
  );
}

export default Dashboard;

WorkViewContext.jsx

import { createContext, useReducer } from "react";

export const WorkViewContext = createContext();

export const workviewReducer = (state, action) => {
  switch (action.type) {
    case "SET_WORKVIEW":
      return {
        workview: action.payload,
      };
    case "SET_KEYWORDS":
      return {
        keywords: action.payload,
      };
    default:
      return state;
  }
};

export const WorkViewContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(workviewReducer, {
    workview: null,
    keywords: null,
  });

  return (
    <WorkViewContext.Provider value={{ ...state, dispatch }}>
      {children}
    </WorkViewContext.Provider>
  );
};

使用保存to local storage函数,我可以保存Documents[0].Keywords数组,但我不能将其保存到React Context中。在这个例子中,我保存了Documents的第一条记录的Keywords数组,但最终结果是保存了所有文档记录的所有关键字记录。

const json = await response.json();

      if (response.ok) {
        localStorage.setItem("workview", JSON.stringify(json.Documents));
        localStorage.setItem(
          "keywords",
          JSON.stringify(json.Documents[0].Keywords)
        );
        dispatch(
          { type: "SET_WORKVIEW", payload: json.Documents },
          {
            type: "SET_KEYWORDS",
            payload: JSON.stringify(json.Documents[0].Keywords),
          }
        );
      }

本地存储图片:

这样做的目的是使用Keywords数组来创建一个表,其中Keywords Name是列名,Keywords Value是表数据。
有人能告诉我我哪里做错了吗?

hyrbngr7

hyrbngr71#

以下是作为keywords调度的内容:

JSON.stringify(json.Documents[0].Keywords)

这是一个stringJSON.stringify),而不是一个Array
然后尝试迭代keywords

keywords.map((keyword, index) => (...))

由于keywordsstring,因此map没有任何内容。
如果我必须打赌,你的解决方案将是调度数组本身:

{
            type: "SET_KEYWORDS",
            payload: json.Documents[0].Keywords
  }

相关问题