在React中，如何向对象数组中的一个对象添加键值

Question

我是React的新手，所以请原谅我。目前正在做一个项目，目前卡在最后一部分。每个项目需求。我要从api中获取数据数组。在页面上显示每个对象的数据。给每个对象一个输入元素以便添加标签，显示标签和数据。然后可以根据标签进行搜索。

数据的简单版本如下:

[{
id: "1",
name: "aaa",
info: "xxx"
},{
id: "2",
name: "bbb",
info: "yyy"
},{
id: "3",
name: "ccc",
info: "zzz"
}]

我首先在获取数据时创建了一个newdata数组，并为标签key添加了空字符串。

useEffect(()=>{
axios.get(apiurl)
.then(response=>{
const students = response.data.students;
const newdata = students.map((o)=>({
...o,
tags: []
}))
setNewdata(newdata)
})
},[apiurl])

所以现在newdata就像:

{
id: "4",
name: "ddd",
info: "xyz",
tags: []
}

我正在使用.map()呈现数据数组，并显示每个对象(学生)，并显示包括输入区域以添加标记的所有数据。下面是显示标签和允许用户输入标签的输入框的代码部分:

newdata.map(function(student, index){ 
return(
...//other code before this
<div className="tagbox">
<div className='tags'>
{student.tags.map(function(tag, index){
return <span key={index}>{tag}</span>
})}
</div>
<input 
id={student.id}
type="text" 
placeholder='tag'
value={newtag}
onChange={e=> setNewtag(e.target.value)}
onKeyDown={handleKeyDown} />
</div>
)}

所以基本上我运行一个handlekeydown函数的进入键。所以当用户完成输入并点击回车。上面应该显示一个新标记，并将其值添加到newdata数组中，以便稍后可以匹配搜索函数。问题是我无法找出正确的代码和语法来执行这个逻辑。到目前为止，我能想到的就是:

function handleKeyDown(e){
if (e.key === "Enter"){            
for (let i = 0; i < newdata.length; i++){                
if (newdata[i].id == "1"){
newdata[i].tags.push(newtag);
}
}

setNewtag(''); //this is to empty the input field
}
}

如您所见，我试图遍历数据中的每个对象(学生)。当学生id匹配时。我们添加数据。否则我们跳过。我硬编码了这个值，使它只对第一个学生起作用。我已经尝试了很多方法，但我要么添加到所有，要么不添加。

现在我已经能够为jsx中的每个输入字段添加一个id，如下所示:

<input id={student.id}/>

现在，每个输入字段都有一个唯一的id，与上面显示的数据中的学生id相同。

所以问题是我应该如何改变我的handlekeydown函数，以便每次我输入一个标签，它只添加到具有相同id的数据。PS:显示的每个对象(学生)都有自己的输入元素，来自我的。map()渲染。

//my goal is to type "!@#" into the input#4, hit enter and have
{
id: "4",
name: "ddd",
info: "xyz",
tags: ["!@#"]
}

Answer 1

您只呈现1个输入。使用与span

相同的方法为每个学生呈现1个输入

<div className='tags'>
{student.tags.map(function(tag, index){
return <span key={index}>{tag}</span>
})}
</div>
<div>
{student.map(function(stud, idx){
return <input 
id={stud.id}
key={idx}
type="text" 
placeholder='tag'
value={newtag}
onChange={e=> setNewtag(e.target.value)}
onKeyDown={(e) => handleKeyDown(e, stud.id)} />
})}
<div>

还记得通过将学生id添加到签名中来更新handleKeyDown函数，并在需要时正确使用它

function handleKeyDown(e, studentId){
if (e.key === "Enter"){            
for (let i = 0; i < newdata.length; i++){                
if (newdata[i].id == studentId){
newdata[i].tags.push(newtag);
}
}

setNewtag(''); //this is to empty the input field
}
}

您会发现还有另一个问题，实际上您的所有输入都使用相同的newTag变量。我把它留给你:)