根据匹配设置对象数组内对象的属性：React JS答案

【问题标题】：Setting a property of an object inside array of objects based on a match: React JS根据匹配设置对象数组内对象的属性：React JS
【发布时间】：2019-12-06 18:45:57
【问题描述】：

https://codesandbox.io/s/polished-bird-662mh

我有一个对象数组和一个具有以下结构的对象

this.state = {
               arr : [ {
                        id: "val1",
                        initialVal: "test1",
                        finalVal: "final1"
                       },
                       {
                         id: "val2",
                         initialVal: "test2",
                         finalVal: "final2"
                       },
                       {
                         id: "val3",
                         initialVal: "test3",
                         finalVal: "final3"
                       },
                       {
                         id: "val4",
                         initialVal: "test3",
                         finalVal: "final3"
                       }
                     ],
                values: [ "test1","test3"]
              }

this.obj = { field: "test1" , val:6}

我正在编写一个函数，该函数将此 obj 作为其参数，并基于“字段”值，它应该使用 obj 的“val”属性设置“finalVal”的状态，并进行以下计算（如果 val 大于5 将“ok”添加到字段，否则添加“cancel”）并且其属性在状态的“values”数组中不匹配的对象，其“finalVal”应设置为空白

所以输出应该关注设置状态：

 [ 
             {
              id: "val1",
              initialVal: "test1",
              finalVal: "ok"
             },
             {
              id: "val2",
              initialVal: "test2"
              finalVal: "final2"
             },
             {
              id: "val3",
              initialVal: "test3"
              finalVal: ""
             },
             {
              id: "val4",
              initialVal: "test4"
              finalVal: "final4"
             }
 ]


//What I have tried so far

 setObjState = obj => {
    console.log(obj);
    let arr = [...this.state.arr];
    let finalArr = arr.map(function(item) {
      if (item.initialVal === obj.field) {
        return { ...item, finalVal: obj.val > 5 ? "Cancel" : "Ok" };
      } else {
         if(this.state.values.includes(item.id){
              return { ...item, finalVal: "" };
          }
      }
    });
    console.log(finalArr);
    this.setState({ arr: finalArr });
  }

【问题讨论】：

标签： javascript arrays reactjs ecmascript-6

【解决方案1】：

你应该映射数组，返回一个对象，并且你想要的字段的值有条件检查决定值；

let filteredArr = arr.map(x => ({...x, finalVal: (x.initialVal == obj.field ? (obj.val > 5 ? "Ok" : "Cancel" ) : "")}))
this.setState({arr: filteredArr})

let obj = { field: "test1" , val: 6}
let arr = [ {
                        id: "val1",
                        initialVal: "test1",
                        finalVal: "final1"
                       },
                       {
                         id: "val2",
                         initialVal: "test2",
                         finalVal: "final2"
                       },
                       {
                         id: "val3",
                         initialVal: "test3",
                         finalVal: "final3"
                       }
                     ]

let filteredArr = arr.map(x => ({...x, finalVal: (x.initialVal == obj.field ? (obj.val > 5 ? "Ok" : "Cancel" ) : "")}))

console.log(filteredArr)

【讨论】：

@vjr 请更改您的示例数据。在 arr 中，您没有任何数值。也很混乱，obj.val 是 6，但你说 if val is greater than 5 add "ok" to the field else add "cancel"。所以这意味着大于或等于 6 ？
@vjr 刚刚编辑，不确定是否正确，但你在哪里

【解决方案2】：

首先你需要 map 函数来更新新状态。

你只需要解决这个问题：

setObjState = obj => {
    console.log(obj);
    let arr = [...this.state.arr];
    let finalArr = arr.map(function(item) {
      if (item.initialVal === obj.field) {
        return { ...item, finalVal: obj.val > 5 ? "Cancel" : "Ok" };
      } else {
        return { ...item, finalVal: "" };
      }
    });

    console.log(finalArr);
    this.setState({ arr: finalArr });
  }

这里是完整的代码和演示：https://codesandbox.io/s/nervous-hodgkin-uxhoi

【讨论】：

现在我必须进行计算，如果 val 小于 5，则需要将“ok”添加到 fieldName 否则“取消”以防它大于匹配的对象。不匹配的对象字段名称应设置为空白
@vjr 更新你的问题你有什么具体要求？？
刚刚做到了:) 请检查
@vjr 更新代码请检查。你可以在这里查看实时版本：codesandbox.io/s/nervous-hodgkin-uxhoi