定位父对象内的嵌套对象属性

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

如何遍历对象数组，直到找到this 天的开始时间或结束时间的索引？到目前为止，我已经尝试过这个，它有效，但前提是只有一个开放时间或一个一般领域。出现问题是因为我有 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()。