React Native学习提醒App：优化星期与提醒数据匹配渲染逻辑

安全阿岳

2026-8-19

问题优化方案

你的核心问题是在每个星期条目下遍历了整个reminderData数组，导致每个星期会生成与reminderData长度相同的条目——匹配的显示时间，不匹配的就显示"Set Time"，最终造成内容重复混乱。

优化思路：对每个星期，直接从reminderData中查找对应的数据，而非遍历全部数据。具体实现如下：

const weeks = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

<View style={{ flex: 1, borderWidth: 1, borderRadius: 10, marginTop: "3%", height: "50%" }}>
  {weeks.length > 0 &&
    weeks.map((week, index) => {
      // 查找当前星期对应的提醒数据
      const matchedReminder = reminderData.find(data => data.WeekDay === week);
      return (
        <View key={index}>
          <View style={{ flexDirection: 'row', marginHorizontal: "5%" }}>
            <Text style={{ flex: 1, paddingTop: 13, color: 'black', fontSize: 18, fontWeight: 'bold' }}>
              {week}
            </Text>

            {matchedReminder ? (
              <Pressable onPress={() => updateTimePicker(matchedReminder, index)}>
                <Text style={{ justifyContent: 'flex-end', paddingTop: 13, color: 'black', fontSize: 18 }}>
                  {moment(matchedReminder.Time).format('hh:mm A')}
                </Text>
              </Pressable>
            ) : (
              <Pressable onPress={() => openTimePicker(week, index)}>
                <Text style={{ justifyContent: 'flex-end', paddingTop: 13, color: 'black', fontSize: 18 }}>
                  Set Time
                </Text>
              </Pressable>
            )}
          </View>

          <View
            style={{
              marginTop: 8,
              borderBottomColor: 'black',
              borderBottomWidth: StyleSheet.hairlineWidth,
            }}
          />
        </View>
      );
    })}
</View>