[英]ReactJS: Appending new object to an existing array with spread
我有這個數組對象開始
[
{
"name": "child",
"pax": {}
}
]
我希望附加一個數組的新屬性。 那么我想將新對象更新/插入該數組。 但是我的代碼出了點問題
function App() {
const [num, setNum] = useState(0);
const [arr, setArr] = useState([
{
name: "child",
pax: {}
}
]);
function appendage({ id, age }) {
const toSaveArr = arr.map(o => {
if (o.name === "child") {
return {
...o,
age: o.age
? o.age.map(o2 => {
if (o2.id === id) {
return {
id: o2.id,
age
};
}
console.log("o2", o2);
//something is wrong here
//why is it not adding new object?
return [
...o2,
{
id,
age
}
];
})
: [{ id, age }]
};
}
return o;
});
setArr(toSaveArr);
}
return (
<div className="App">
<h1>{num}</h1>
<button
onClick={() => {
setNum(num + 1);
appendage({
id: num + 1,
age: num + 1
});
}}
>
add
</button>
<button>update age where id equal to 2</button>
<pre>{JSON.stringify(arr, null, 2)}</pre>
</div>
);
}
https://codesandbox.io/s/pedantic-mclean-107q2
我想我在這里錯誤地使用了傳播算子。
問題是傳遞給map
的函數返回一個數組,但這不是map
工作方式。 您只能更改數組中的現有對象,而不能添加新對象。 您可以使用例如find
數組中的對象並檢查結果是否undefined
。
const result = o.age.find(o2 => o2.id === id);
if (result) {
result.age = age;
} else {
o.age.push({ id: o2.id, age: age });
}
您可以在數組中使用find方法來查找特定值,在此處是"child"
:
import React, { useState, useDebugValue } from "react";
import styled from "styled-components";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const [num, setNum] = useState(0);
const [arr, setArr] = useState([
{
name: "child",
pax: []
}
]);
function appendage({ id, age }) {
var newarr = arr;
var add = {
id: id,
age: age
};
newarr.find(el => el.name === "child").pax = [
...newarr.find(el => el.name === "child").pax,
add
];
setArr(newarr);
}
return (
<div className="App">
<h1>{num}</h1>
<button
onClick={() => {
setNum(num + 1);
appendage({
id: num + 1,
age: num + 1
});
}}
>
add
</button>
<button>update age where id equal to 2</button>
<pre>{JSON.stringify(arr, null, 2)}</pre>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
我們檢查是否已經存在年齡對象,如果是,則使用傳播運算符添加一個新對象; 如果沒有,我們插入對象;
相關代碼 :
import React, { useState } from "react";
import styled from "styled-components";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const [num, setNum] = useState(0);
const [arr, setArr] = useState([
{
name: "child",
pax: {}
}
]);
function appendage({ id, age }) {
console.log("inside appendage with ", id, " and age:", age);
const toSaveArr = arr.map(o => {
if (o.name === "child") {
if (o.age) {
console.log("age exists");
o.age = [
...o.age,
{
id: id,
age: age
}
];
console.log("O", o);
} else {
o.age = [
{
id: id,
age: age
}
];
console.log("O", o);
}
/*return {
...o,
age: o.age
? o.age.map(o2 => {
if (o2.id === id) {
return {
id: o2.id,
age
};
}
console.log("o2", o2);
//something is wrong here
//why is it not adding new object?
return [
...o2,
{
id,
age
}
];
})
: [{ id, age }]
};
*/
}
return o;
});
setArr(toSaveArr);
}
return (
<div className="App">
<h1>{num}</h1>
<button
onClick={() => {
setNum(num + 1);
appendage({
id: num + 1,
age: num + 1
});
}}
>
add
</button>
<button>update age where id equal to 2</button>
<pre>{JSON.stringify(arr, null, 2)}</pre>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.