在不覆盖状态的情况下在 .map 函数中设置 React 状态
Setting React state in .map function without overwriting state
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);
}
..........
}, []);
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);
}
..........
}, []);