修改对象的useState数组
Modify useState array of object
我有一个 useState 对象数组:
const [processes, setProcesses] = useState([]);
从数据库中获取值后变为:
[{processId: 0, status: "true"},
{processId: 1, status: "true"}]
现在我想给它添加新的属性,这样它就变成了:
[{processId: 0, name:"process1",status: "true",active:"true"},
{processId: 1, name:"process2",status: "true",active:"true"}]
名称来源:
var allProcNames=["process1","process2"]
我试过以下方法:
var objProc = JSON.parse(JSON.stringify(processes));
objProc.map((proc) => ({
...proc,
name: procNames[proc.processId],
active: true,
}));
但是它只记录相同的内容:
[{processId: 0, status: "true"}]
除了为进程名称向 db 添加一个新列之外,还能做什么?
您可以像这样更改代码。
let temp = objProc.map((proc) => {
return ({
...proc,
name: procNames[proc.processId],
active: true,
}));
setProcesses(temp);
在这种情况下,您可以将所有过程数据存储在 temp 上,然后在 state 上设置值。
别忘了 return。很有必要
您不应该尝试直接改变状态。
(检查 ref:https://reactjs.org/docs/react-component.html#setstate)
您可以使用 filter
或 map
方法并使用全新状态更新您的当前状态:
const [processes, setProcesses] = useState([
{processId: 0, status: "true"},
{processId: 1, status: "true"}
]);
const arrayObjUpdater = () => {
const newArrayState = processes.map((currentProcess, idx) => ({
...currentProcess,
name: `proccess${idx}`,
active: "true"
}));
console.log(newArrayState); // See output below
return setProcesses(newArrayState);
}
arrayObjUpdater();
// Output: [{processId: 0, name:"process1",status: "true",active:"true"}, {processId: 1, name:"process2",status: "true",active:"true"}]
我有一个 useState 对象数组:
const [processes, setProcesses] = useState([]);
从数据库中获取值后变为:
[{processId: 0, status: "true"},
{processId: 1, status: "true"}]
现在我想给它添加新的属性,这样它就变成了:
[{processId: 0, name:"process1",status: "true",active:"true"},
{processId: 1, name:"process2",status: "true",active:"true"}]
名称来源:
var allProcNames=["process1","process2"]
我试过以下方法:
var objProc = JSON.parse(JSON.stringify(processes));
objProc.map((proc) => ({
...proc,
name: procNames[proc.processId],
active: true,
}));
但是它只记录相同的内容:
[{processId: 0, status: "true"}]
除了为进程名称向 db 添加一个新列之外,还能做什么?
您可以像这样更改代码。
let temp = objProc.map((proc) => {
return ({
...proc,
name: procNames[proc.processId],
active: true,
}));
setProcesses(temp);
在这种情况下,您可以将所有过程数据存储在 temp 上,然后在 state 上设置值。 别忘了 return。很有必要
您不应该尝试直接改变状态。 (检查 ref:https://reactjs.org/docs/react-component.html#setstate)
您可以使用 filter
或 map
方法并使用全新状态更新您的当前状态:
const [processes, setProcesses] = useState([
{processId: 0, status: "true"},
{processId: 1, status: "true"}
]);
const arrayObjUpdater = () => {
const newArrayState = processes.map((currentProcess, idx) => ({
...currentProcess,
name: `proccess${idx}`,
active: "true"
}));
console.log(newArrayState); // See output below
return setProcesses(newArrayState);
}
arrayObjUpdater();
// Output: [{processId: 0, name:"process1",status: "true",active:"true"}, {processId: 1, name:"process2",status: "true",active:"true"}]