根据匹配后的计算设置对象数组内对象属性的状态：reactjs答案

【问题标题】：Setting state of an object property inside array of objects based on a computation after match : reactjs根据匹配后的计算设置对象数组内对象属性的状态：reactjs
【发布时间】：2019-07-30 09:00:18
【问题描述】：

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

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

this.state = {
               arr : [ {
                        id: "val1",
                        initialVal: "test1",
                        finalVal: "final1"
                       },
                       {
                         id: "val2",
                         initialVal: "test2",
                         finalVal: "final2"
                       },
                       {
                         id: "val3",
                         initialVal: "test3",
                         finalVal: "final3"
                       },
                       {
                         id: "val4",
                         initialVal: "test4",
                         finalVal: "final4"
                       }
                     ],
                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 => {
    let arr = [...this.state.arr];
    let finalArr = arr.map(function(item) {
      if (item.initialVal === obj.field) {
        return { ...item, finalVal: obj.val > 5 ? "Ok" : "Cancel" };
      } else {
         if(this.state.values.includes(item.id){
              return { ...item, finalVal: "" };
          }
      }
    });
    console.log(finalArr);
    this.setState({ arr: finalArr });
  }

【问题讨论】：

标签： javascript reactjs ecmascript-6 setstate

【解决方案1】：

您缺少else 条件：

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

这里有一个Working CodeSandbox Sample 供您参考。

【讨论】：

【解决方案2】：

您可以通过以下方式大大简化该功能：

  setObjState = obj => {
    // create a new Array of items

    const arr = this.state.arr.map(item => {
      // determine the value
      const value = obj.val > 5 ? 'ok' : 'cancel';

      // set value or empty value
      const finalVal = item.initialVal === obj.field ? value : '';

      // return new object with finalVal
      return {
        ...item,
        finalVal,
      };
    });

    this.setState({ arr });
  };

https://codesandbox.io/s/gifted-frost-4olqb

【讨论】：

【解决方案3】：

如果没有任何 if 条件通过，您需要一个最终的 else 块，以便您可以按原样返回项目：

我还认为您正在尝试检查 item.initialVal，因为它实际上具有测试编号。

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

查看沙盒：https://codesandbox.io/s/falling-currying-no6ui

【讨论】：