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”值，应通过以下计算将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 });
  }

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

这是您推荐的Working CodeSandbox Sample。

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

如果没有if条件通过，则需要一个final else块，以使您可以按原样返回该项目：

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

df['new_date'] = df['orig_date'] + df['offset'].astype('timedelta64[D]'))

请参阅沙箱：https://codesandbox.io/s/falling-currying-no6ui

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

3 个答案: