如何使用 React Native State 管理嵌套对象

Question

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

• 首页（我允许用户增加他们当天的饮料量和 显示他们喝了多少水）
• 历史（用户的饮水历史以图表形式显示，这是我需要嵌套对象的地方）
• 通知（用户使用开关按钮定义，如果他们 想要接收通知以及何时接收）
• 设置（用户输入年龄、体重以确定多少 他们应该每天喝）。这是用户看到的第一个屏幕 他们下载了应用

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

我所做的是创建了名为 object 的新状态并将其设置为空对象。而且我能够使用状态处理函数更新历史状态，如下所示。

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