我发出了一个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是表数据。
有人能告诉我我哪里做错了吗?
1条答案
按热度按时间hyrbngr71#
以下是作为
keywords
调度的内容:这是一个
string
(JSON.stringify
),而不是一个Array
。然后尝试迭代
keywords
:由于
keywords
是string
,因此map
没有任何内容。如果我必须打赌,你的解决方案将是调度数组本身: