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

Question

https://codesandbox.io/s/poliished-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 });
  }

标签： javascriptarraysreactjsecmascript-6

Answer 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)