javascript - 以父对象内的嵌套对象属性为目标

Question

我正在尝试更改多天的打开/关闭时间(以及发送到端点)的状态，这些时间在对象中返回给我，如下所示:

我在 React 组件中渲染了这些:

{this.state.time.map(each => (
    <Fragment key={each.code}>
        <OpeningHours
            code={each.code}
            day={each.description}
            name={each.code}
            open={each.open !== null ? each.open : '00:00'}
            close={each.close !== null ? each.close : '00:00'}
            onChange={this.onTimeChange}
        />
    </Fragment>
))}

如何遍历对象数组，直到找到这一天 的开市或闭市时间的索引？到目前为止，我已经尝试过这个，这很有效，但前提是只有一个开放时间或一般的一个领域。问题出现是因为我有 2 个字段要编辑:

onTimeChange(e) {
  let inputs = this.state.inputs.slice();
  for(let i in inputs){
      if(inputs[i].name == event.target.name){
          inputs[i].value = event.target.value;
          this.setState ({inputs});
          break;
      }
  }
}

Answer 1

 const newInputs = inputs.map(p =>

      p.name === <unique_name/code>
        ? { ...p, [e.target.name]: e.target.value }
        : p
    );
    this.setState({inputs:newInputs,});

更改 onTimeChange() 方法以获取 unique_name:onTimeChange(e, code)

一个简单的例子:https://codesandbox.io/s/v1y14rl2oy

由于索引是唯一的，你可以这样做

inputs[index] = { ...inputs[index], [e.target.name]: e.target.value }也没有像在沙箱中那样使用 map()。