[英]Editing multiple object value in an object array with useState
我有一個類似於下面的 object 陣列
[array1, setArray1] = useState(
[
{
name: "somename",
count: 0,
division: "somedivision",
cost: 1000,
},
{
name: "secondname",
count: 0,
division: "somedivision",
cost: 2000,
},
]
)
如何單獨更新列表中每個 object 的成本值?
我在想像 setArray1((previous) => ({...previous, cost: newcost}))
但是我怎樣才能對 object 數組中的多個對象執行此操作?
const App = () =>{ const [array, setArray] = React.useState([ { name: "somename", count: 0, division: "somedivision", cost: 1000, }, { name: "secondname", count: 0, division: "somedivision", cost: 2000, }, ]) const updateCosts = () => { let newCosts = [1002, 2006] setArray(previous => previous.map((elem, index)=> { return({...elem, cost: newCosts[index]}) }) ) } return( <div> <button onClick={()=>updateCosts()}>Update costs</button> { array.map(elem => <p key={elem.name}>{`Product ${elem.name} Cost ${elem.cost}`}</p>) } </div> ) } ReactDOM.render( <App/>, document.getElementById("root") );
<div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.