如何更新数组内的 json 对象？答案

【问题标题】：How can I update a json object inside of an array?如何更新数组内的 json 对象？
【发布时间】：2018-04-12 23:39:54
【问题描述】：

我有一个对象数组，我想更新其中的一些内容。我想我可以只映射对象，找到我正在寻找的匹配项，然后更新它。

data = data.map(obj => {
   return this.state.objToFind === obj.title;   
   }).map(obj, idx) => {
      console.log("found " + obj.title);     // reads found + undefined?
      obj.menu = this.state.menu;
      obj.title = this.state.title;
      obj.content = this.state.content;
 });

但是，这不起作用。我找到了对象，但 obj.anything 未定义。我的 console.log 显示“发现未定义”。

【问题讨论】：

那里有 no JSON 对象：learn what JSON really is
我不知道你想说什么。数据是 JSON 对象的数组。
如果您不明白，请考虑阅读提供的资源。
你从函数中返回一个布尔值，所以第二个 map() 将处理一个布尔值数组，而不是对象。
@user3622460 你想通过写return this.state.objToFind === obj.title;来实现什么。因为这个条件会返回布尔数组？

标签： javascript json reactjs array-map

【解决方案1】：

将其更改为其他变量而不是 obj，因为它引用了父 obj，即 an array。还要在第一个返回数组的函数中使用 array.filter，

data = data.filter(obj => {
   return this.state.objToFind === obj.title;   
   }).map(newval, idx) => {
      console.log("found " + newval.title);     
      newval.menu = this.state.menu;
      newval.title = this.state.title;
      newval.content = this.state.content;
 });

【讨论】：

这是一个想法，但您的 data 变量将只是未定义的数组，因为您的第二个 map 函数不返回任何内容。
如果我使用 newVal 这实际上会将 JSON 对象更新为这些新值吗？我认为 obj.menu 将是我要编辑的实际对象
过滤器是我最初拥有的，但它并没有给我带来任何好处。这将返回一个对象，我必须删除旧对象并将新对象推送到数组中。

【解决方案2】：

Map 用于返回一个变异的对象。使用地图时，您需要返回一些东西，在您的情况下修改对象。

但是有些事情你做错了。 1）您正在使用 .map 搜索某些内容（这不是您使用地图的方式）；尝试使用 .filter 或 .find 2）使用地图（在第二个函数中）更新您的对象后，您需要将其返回。案例一：

data = data.filter(obj => {
       return this.state.objToFind === obj.title;   
   }).map(foundObj, idx) => {
          console.log("found " + foundObj.title);
          foundObj.menu = this.state.menu;
          foundObj.title = this.state.title;
          foundObj.content = this.state.content;
      return foundObj; //updated obj
 });

案例2：

    var foundObj = data.find(obj => {
     return this.state.objToFind === obj.title;   
   });
    console.log("found " + foundObjs.title);
    foundObjs.menu = this.state.menu;
    foundObjs.title = this.state.title;
    foundObjs.content = this.state.content;

【讨论】：

第二个map()应该是forEach()

【解决方案3】：

如果您只想处理那些使this.state.objToFind === obj.title 为真的元素，那么Array.filter 就是您所需要的

data = data.filter(obj => {
   return this.state.objToFind === obj.title;   
   }).map(obj, idx) => {
      console.log("found " + obj.title);     // reads found + undefined?
     ...
 });

【讨论】：

【解决方案4】：

data.map(obj => {
  return this.state.objToFind === obj.title;   
})

第一张地图会返回一个真假数组，第二张地图将遍历这些值，console.log("found " + obj.title) 将因此打印“found + undefined”。

也许你想要这样的东西。

data = data.filter(obj => {
   return this.state.objToFind === obj.title;   
   }).map(obj, idx) => {
      console.log("found " + obj.title);
      obj.menu = this.state.menu;
      obj.title = this.state.title;
      obj.content = this.state.content;
      return obj;
 });

【讨论】：

【解决方案5】：

更简单

您可以使用 some 运算符。（它通过遍历数组来工作，当你返回 true 时它会跳出循环）

data.some(function(obj){
   if (obj.title ==== 'some value'){
        //change the value here
        obj.menu = 'new menu';
        obj.title = 'new title';
        return true;    //breaks out of he loop
   }
});

【讨论】：

我会检查一下 - 这看起来像我想要做的。我宁愿不必从数据数组中推送和弹出。