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

Question

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 作为其参数，并基于 "field" 值，它应该使用 "val" 属性 设置 "finalVal" 的状态具有以下计算的 obj（如果 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 });
  }

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

---

Here's a Working CodeSandbox Sample for your ref.

Answer 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

Answer 3

如果 none 的 if 条件通过，您需要一个最后的 else 块，这样您就可以 return 原样的项目：

我还认为您正在尝试检查 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