Reactjs 当它是一个对象数组时，如何设置状态

所以我想建立一个投票应用程序，我需要将投票数设置为状态，以便在单击时更新。但我不知道如何在不中断另一个属性和另一个对象的情况下设置对象的一个属性

import './App.css';
import React, {useState} from 'react'

function App() {
    const [votes, setVotes] = useState([
        {
            voteNum: 0,
            name: "Item 1"
        },
        {
            voteNum: 0,
            name: "Item 2"
        }
    ])
    
    
    const addVote = (vote) => {
        vote.voteNum++
        setVotes( /* How do I set the votes.voteNum to be equal to vote.voteNum from the line above */)
    }

  return (
    <div className="App">
        <h1>Cast Your Votes!</h1>

        {votes.map(vote => (
            <form className="votee" onClick={() => addVote(vote)}>
                <h1>{vote.voteNum}</h1>
                <h2>{vote.name}</h2>
            </form>
        ))}
    </div>
  );
}

export default App;

import'/App.css'；
从“React”导入React，{useState}
函数App（）{
const[voces，setvoces]=useState([
{
呕吐量：0，
名称：“项目1”
},
{
呕吐量：0，
名称：“项目2”
}
])
const addVote=（投票）=>{
voteNum++
setVotes（/*如何设置vots.voteNum与上面一行中的vote.voteNum相等*）
}
返回(
投票吧！
{投票.map（投票=>(
addVote（投票）}>
{投票，投票}
{投票.姓名}
))}
);
}
导出默认应用程序；

您应该以不变的方式更新react状态：

const addVote = (vote) => {
     setVotes(votes.map(x => x === vote ? ({
        ...x,
        voteNum: x.voteNum + 1
    }) : x))
}

或者最好使用一些唯一的Id进行比较，例如，如果您有对象的Id，则使用

x.Id===vote.Id

；或者，如另一个答案中所述，您也可以使用元素数组索引进行比较（将其传递给函数，而不是

投票

）。

将索引传递给函数

{votes.map((vote, index) => (
        <form className="votee" onClick={() => addVote(index)}>
            <h1>{vote.voteNum}</h1>
            <h2>{vote.name}</h2>
        </form>
    ))}

注意：Usestate被预先设置为使用基本数据类型，即字符串、布尔值和数字

---

对于数组和对象，请使用

，这不是不可变的，我只是使用深度克隆进行了更新@gmoniavaOk，除了性能问题之外，字符串化也有它自己的缺陷，但现在它至少是不变的。天才，非常感谢！

{votes.map((vote, index) => (
        <form className="votee" onClick={() => addVote(index)}>
            <h1>{vote.voteNum}</h1>
            <h2>{vote.name}</h2>
        </form>
    ))}

const addVote = (index) => {
    votes[index].voteNum ++;
    setVotes([...votes]);
}