Javascript-如何在映射函数中推送数据？

我在useState钩子中存储了以下数据结构

const[data，setData]=useState([
{
id:uniqid（），
标题：“，
内容：[
id:uniqid（），
标题：“，
]
},
{
id:uniqid（），
标题：“，
内容：[
id:uniqid（），
标题：“，
],
}
])

您没有从地图返回任何内容

const handleAddReport = uniqueID =>{
  const object = {
    id: uniqid(),
    title:"",
  }
  const formData = [...data];
  const newData = formData.map(section=> {
     if(section.id === uniqueID){
      section.content.push(object);
    }
   return section;
  });
  
  setForm(newData);
}

但另一种方法不是比较unqiueId，而是传递数据数组的索引。这样我们就可以避免

map

const handleAddReport = dataIndex =>{
  const object = {
    id: uniqid(),
    title:"",
  }
// deep clone the data
const clonedData = JSON.parse(JSON.stringify(data));
// since the data is cloned you can mutate it directly 
clonedData[dataIndex].content.push(object);
setForm(clonedData)
}

---

你没有从地图上归还任何东西

const handleAddReport = uniqueID =>{
  const object = {
    id: uniqid(),
    title:"",
  }
  const formData = [...data];
  const newData = formData.map(section=> {
     if(section.id === uniqueID){
      section.content.push(object);
    }
   return section;
  });
  
  setForm(newData);
}

但另一种方法不是比较unqiueId，而是传递数据数组的索引。这样我们就可以避免

map

const handleAddReport = dataIndex =>{
  const object = {
    id: uniqid(),
    title:"",
  }
// deep clone the data
const clonedData = JSON.parse(JSON.stringify(data));
// since the data is cloned you can mutate it directly 
clonedData[dataIndex].content.push(object);
setForm(clonedData)
}

这样试试

const onAddReport = (uniqid: number) => {
    const obj = {
        id: 3,
        title: ''
    };
    const formData = [...data];
    const mappedData = formData.map((data) => data.id === uniqid ? ({ ...data, content: [...data.content, obj] }) : data)
    setData(mappedData);
}

这样试试

const onAddReport = (uniqid: number) => {
    const obj = {
        id: 3,
        title: ''
    };
    const formData = [...data];
    const mappedData = formData.map((data) => data.id === uniqid ? ({ ...data, content: [...data.content, obj] }) : data)
    setData(mappedData);
}

---

您需要在

map

map

中返回

section

，不返回是没有意义的。你也可以使用

forEach

，或者更切中要害地使用

forEach

，而不是循环整个集合，只是

find

你想要更新的单个项目，并对其进行更新；如果您做了以下两件事中的一件，您就是误用了map：在map回调中产生副作用，忽略map的返回值。此外，应避免修改数据结构；如果你能保持它们不变，那么惊喜就会减少。最后，您似乎没有在任何地方调用

setData

，您需要在

map

中返回

部分

，

map

而不返回是没有意义的。你也可以使用

forEach

，或者更切中要害地使用

forEach

，而不是循环整个集合，只是

find

你想要更新的单个项目，并对其进行更新；如果您做了以下两件事中的一件，您就是误用了map：在map回调中产生副作用，忽略map的返回值。此外，应避免修改数据结构；如果你能保持它们不变，那么惊喜就会减少。最后，您似乎没有在任何地方调用

setData