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

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这一天的开放或关闭时间的索引？到目前为止我尝试了以下方法，它可以工作，但只有在只有一个开放时间或一个字段时才能工作。由于我有两个要编辑的字段，所以问题出现了：

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

- Charlie Coplestone

---

你可以使用 .filter()。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter - Asteriscus

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()在沙盒中。

- Asteriscus

---

请参见上文，了解我所面临的问题。 - Charlie Coplestone

开放和关闭时间都可以编辑，全天对象有一个开放和关闭属性（全天对象嵌套在另一个名为“opening_hours”的对象中），属性名为“open”和“close”，请参见上面记录的对象的截图。我需要能够单独编辑每一天的开放和关闭时间，并将新状态设置为，如果我通过用户输入编辑“星期二”“开放”到05:00，则会更改状态，但仅更改“星期二”“开放”到05:00之前的状态。 - Charlie Coplestone

它肯定非常接近，只是在你的“list”对象中，你添加了“name = name0 name = name1”等内容，而我的对象“code”属性不带有其索引。@Asteriscus - Charlie Coplestone

你不需要索引。那只是一个例子。 你的“code”属性不唯一吗？如果不是，那么你如何知道要更新哪一天呢？ - Asteriscus

你需要在 onChange 函数中传递一个属性，以确保你要更新的对象属于特定的日期。 - Asteriscus