如何使用反应本机状态管理嵌套对象

Question

我正在尝试构建一个水提醒应用程序。我有4个屏幕，我正在使用React-Navigation

• 家(我允许用户增加当天的饮料，并显示他们喝了多少水(
• 历史记录(用图显示了用户的水历史记录，这是我需要嵌套对象的地方(
• 通知(用户使用开关按钮定义的情况想要接收通知并何时接收(
• 设置(用户进入年龄，重量以确定多少他们应该每天喝(。这是第一个屏幕用户查看何时他们下载了应用

我的应用程序中有状态，例如醉酒，目标等。我每天都将醉酒的价值设置为零，用户可以重新开始。

我所做的是我创建了称为"对象"的新状态并将其设置为空对象。而且我能够使用状态处理程序功能如下更新历史记录状态。

  handleHistory = () => {
    let currentDateString = moment().format('DDMMYYYY');
    this.setState(
      {
        history: {
          ...this.state.history,
          date: currentDateString,
          drunk: this.state.drunk,
          goal: this.state.goal,
          progress: this.state.progress,
        },
      });
  };
//this is what I get
Object {
    "date": "20052019",
    "drunk": 136,
    "goal": 82,
    "progress": 1.6585365853658536,
}

我需要的是带有键的日期嵌套对象

history: {
    "20052019": {
        "date": "20052019",
        "drunk": 136,
        "goal": 82,
        "progress": 1.6585365853658536,
    },
    "21052019": {
        "date": "21052019",
        "drunk": 82,
        "goal": 82,
        "progress": 1.0,
    }
}

Answer 1

您可以使用object[key]。

动态访问/创建密钥

handleHistory = () => {
  const currentDateString = moment().format('DDMMYYYY');
  const { history, drunk, goal, progress } = this.state;
  this.setState({
    history: {
      ...history,
      [currentDateString]: {
        ...history[currentDateString],
        date: currentDateString,
        drunk, goal, progress
      }
    }
  });
};