javascript - 在 .map 函数中设置 React 状态而不覆盖状态
问题描述
javascript新手,我正在努力使用简单的地图方法。
我想遍历两个对象数组,并设置状态以包含每个映射的结果。目前,每个新项目都会覆盖状态。
期望的输出:
refData = {
user: [
{key: 1, value: "A"},
{key: 2, value: "B"}
],
product: [
{key: 1, value: "A"},
{key: 2, value: "B"}
],
role: [
{key: 1, value: "A"},
{key: 2, value: "B"}
]
}
电流输出:
refData = {
user: [
{key: 1, value: "A"},
{key: 2, value: "B"}
]
}
refData = {
product: [
{key: 1, value: "A"},
{key: 2, value: "B"}
]
}
refData = {
role: [
{key: 1, value: "A"},
{key: 2, value: "B"}
]
}
产生当前错误输出的代码:
const [refData, setRefData] = React.useState();
useEffect(() => {
const refDataArr = [
{ url: "users", field: "user" },
{ url: "products", field: "product" },
{ url: "roles", field: "role" }
]
const fetchRefData = () => {
try {
refDataArr.map(async (o, index) => {
let url = o.url
let field = o.field
const res = await axios.get(`http://.../${url}/ `);
const data = res.data.data
const resArr = Object.values(data).map((item, index) => {
return {
key: item._key,
value: item[field]
}
});
setRefData({ //overwritten with each returned item
...refData,
[field]: resArr,
})
})
} catch (err) {
console.log(err);
}
}
fetchRefData();
}, []);
任何帮助将非常感激!
解决方案
一种方法是先构建 json 对象,然后将其设置为状态。
React.useEffect(() => {
..........
let newRefData = {};
..........
try {
refDataArr.map(async(o, index) => {
let url = o.url
let field = o.field
const res = await axios.get(`http://.../${url}/ `);
const data = res.data.data
const resArr = Object.values(data).map((item, index) => {
return {
key: item._key,
value: item[field]
};
});
newRefData[field] = resArr;
});
setRefData(newRefData);
} catch (err) {
console.log(err);
}
..........
}, []);
推荐阅读
- ajax - HttpPostedFileBase 有时在 ajax 调用时为空
- r - LASSO 模型的时间序列交叉验证
- sql - SQL:使用 3 个不同的 where 子句查询同一列 3 次
- ios - iPhone X没有depthData,iPhone XS很好
- python - 接受列表和元素并生成一个列表的 Python 函数
- ios - iOS SwipeAction 有时会移动到 UITableViewCell 后面,并且在向左或向右滑动时它不会移动
- python - 如何将类似于列表的字符串更改为再次列出?
- google-apps-script - 很抱歉,从存储读取时发生服务器错误。错误代码 PERMISSION_DENIED
- r - R中带分号的表达式()命令
- python-3.x - ortools vrp 没有给我任何解决方案