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

Question

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 作为其参数，并根据“field”值，它应该使用 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 });
  }

Answer 1

首先您需要 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