React更新对象数组中的现有对象

Question

我有一个输入:

<input
type="text"
name={item.job_n}
defaultValue={item.azienda}
readOnly={isReadonly}
onChange={handleChange}                                                             

和onChange我添加的输入值和名称作为一个对象在useState=([])的对象数组，因此我的数组看起来像这样:[{azienda: "， job_n: "}， {azienda: "， job_n: "}]

const [azienda, setAzienda] = useState([]);
const handleChange =(e)=>{
{
const azienda_name = e.target.value
const job_n = e.target.name            
setAzienda((prevState) => [...prevState, {azienda: azienda_name, job_n: job_n}])                                    
}   
}

代码工作良好，每次onchange事件发生时，一个新的对象被添加到我的数组中。我遇到的问题是，如果一个具有job_n的对象已经存在于数组中，我需要更新该对象，而不是为每个onchange创建一个新对象。

Answer 1

我已将变量从意大利语更改为英语，以便每个人都可以理解它们，并且还更改了一些变量以遵循javascript的命名约定。

function handleChange(e) {
const businessName = e.target.value;
const jobName = e.target.name;
const jobIndex = business.findIndex(v => {
return v["jobName"] === jobName;
});
if (jobIndex === -1) {
setBusiness([...business, { businessName, jobName }]);
return;
}
const businessClone = [...business];
businessClone[jobIndex] = { businessName, jobName };
setBusiness(businessClone);
}

Answer 2

把你的代码改成，

setAzienda((prevState) => {
const jobExistIndex = prevState.findIndex(obj => obj.job_n === job_n)
const jobExist = prevState[jobExistIndex]
if (jobExist) {
const newState = [...prevState]
newState[jobExistIndex] = {...jobExist, job_n: job_n}
return newState 
}
else {
const newState = [...prevState]
return [...newState, {azienda: azienda_name, job_n: job_n}]
}

Answer 3

const handleChange = e =>{
{
const azienda_name = e.target.value;
const job_n = e.target.name;
const existIndex = azienda.findIndex(p => p.job_n === job_n);
if(existIndex != -1)
{
azienda[existIndex].azienda_name = azienda_name 
}
else
{
azienda.push({azienda_name : azienda_name, job_n: job_n})
}        
setAzienda(azienda);
}