如何获取Alert.prompt输入并将其添加到React组件state的items数据中

核心逻辑说明 #

• 你存储的items是以日期为键的对象，每个键对应当天的服药条目数组，更新React state时必须遵循不可变原则，不能直接修改原state数据
• 以下方案默认将新的服药记录添加到当前日期的条目下，如果你需要用户手动选择日期，只需要替换代码里的日期生成逻辑即可

具体修改代码 #

把你原有Alert.prompt里的OK按钮 onPress 逻辑替换为如下内容即可：

{
  text: "OK",
  onPress: input => {
    // 1. 输入非空校验，避免插入空白条目
    if (!input.trim()) return;
    
    // 2. 生成和state格式一致的当前日期字符串（YYYY-MM-DD）
    const today = new Date();
    const year = today.getFullYear();
    // 月份从0开始计数，需要+1后补前置0
    const month = String(today.getMonth() + 1).padStart(2, '0');
    const day = String(today.getDate()).padStart(2, '0');
    const currentDateKey = `${year}-${month}-${day}`;

    // 3. 拷贝原有items，避免直接修改state
    const originalItems = this.state.items;
    // 4. 对应日期已有条目就追加新内容，没有就新建数组
    const updatedDateItems = [
      ...(originalItems[currentDateKey] || []),
      { name: input }
    ];
    // 5. 生成新的完整items对象
    const updatedItems = {
      ...originalItems,
      [currentDateKey]: updatedDateItems
    };

    // 6. 触发state更新
    this.setState({ items: updatedItems });
  }
}

可选扩展 #

如果你需要把新内容添加到指定日期，直接把上面的currentDateKey变量替换为对应日期字符串即可，比如要添加到2012年5月26日的条目，就写：
const currentDateKey = '2012-05-26'

如果需要同天的条目按时间排序，可以在更新updatedDateItems后加一层排序逻辑即可。

内容的提问来源于stack exchange，提问作者Ehsaas