React Native 元素映射问题

我目前正在构建一个日历应用程序，在这种情况下，您可以在日历上按所需的日期，它会在与该日期相关的所有事件下方显示。然而，这些事件有一个“下拉”功能来显示更多数据，当我按下它们以切换该元素的更详细版本时，当天的所有事件都会切换到详细视图。

...

const events = [
  { title: 'Maths Exam', date: '2023-04-17', time_start: "HH:MM", time_end: "HH:MM", duration: "HH:MM", teacher: "Ms. Sonila", details: "Lorem Ipsum Dolor Sit amet" },
  { title: 'English Quiz', date: '2023-04-17', time_start: "HH:MM", time_end: "HH:MM", duration: "HH:MM", teacher: "Ms. Morena", details: "Lorem Ipsum Dolor Sit amet" },
  { title: 'Albanian Essay', date: '2023-04-17', time_start: "HH:MM", time_end: "HH:MM", duration: "HH:MM", teacher: "Ms. Junilda", details: "Lorem Ipsum Dolor Sit amet" },
  { title: 'Albanian Project', date: '2023-04-17', time_start: "HH:MM", time_end: "HH:MM", duration: "HH:MM", teacher: "Ms. Junilda", details: "Lorem Ipsum Dolor Sit amet" },
  { title: 'Albanian Something', date: '2023-04-17', time_start: "HH:MM", time_end: "HH:MM", duration: "HH:MM", teacher: "Ms. Junilda", details: "Lorem Ipsum Dolor Sit amet" },
];

...

const [selectedDate, setSelectedDate] = useState(new Date().toISOString().slice(0, 10));
  let currentDate = (new Date()).toISOString().split('T')[0]
  let dateSelected = (selectedDate.replaceAll("-", " ")).split(" ").reverse().join(" ");
  const getEventsForDay = (date) => {
    return events.filter((event) => event.date === date);
  };
  const onDayPress = (day) => {
    setSelectedDate(day.dateString);
  };

...

const [isDetailed, setIsDetailed] = useState(false);
  const [isBlock, setIsBlock] = useState("none");
  function toggleView() {
    setIsDetailed(!isDetailed);
    if (isDetailed) {
      setIsBlock("flex")
    } else {
      setIsBlock("none")
    }
  }

...

<Text style={styles.eventsTitle}>Events for {dateSelected}:</Text>
        <ScrollView style={{ height: (calendarHeight / 1.5) + 15 }} showsVerticalScrollIndicator={false}>
          {getEventsForDay(selectedDate).map((event, index) => (
            <TouchableOpacity onPress={toggleView} key={index}>
              <Card style={styles.eventItem}>
                <View>
                  <Text style={styles.eventItemTitle}>{event.title}</Text>
                  {/* @ts-ignore */}{/* This is to ignore the "display: `${isBlock}`" below as it threw an error. */}
                  <Text style={{ display: `${isBlock}`, color: "white", marginTop: 5 }}>{event.details}</Text>
                </View>
                {isDetailed ? (
                  <Ionicons
                    name="chevron-up"
                    color={Colors.primary}
                    size={25}
                    key={index}
                  />
                ) : (
                  <Ionicons
                    name="chevron-down"
                    color={Colors.primary}
                    size={25}
                    key={index}
                  />
                )
                }
              </Card>
            </TouchableOpacity>
          ))}
        </ScrollView>

您正在使用相同的状态来控制卡详细信息的开/关切换。因此，单击按钮时将立即打开所有详细信息。

如果你想一个一个地控制它，你需要有不止一种状态。我建议您为这种情况创建一个组件。

const EventComponent = ({event, index}) =>{

  //Move this component out of parent component to prevent re-render issue

  const [isDetailed, setIsDetailed] = useState(false);
  const [isBlock, setIsBlock] = useState("none");

  function toggleView() {
    setIsDetailed(!isDetailed);
    if (isDetailed) {
      setIsBlock("flex")
    } else {
      setIsBlock("none")
    }
  }

  return(
    <TouchableOpacity onPress={toggleView} key={index}>
      <Card style={styles.eventItem}>
        <View>
          <Text style={styles.eventItemTitle}>{event.title}</Text>
          {/* @ts-ignore */}{/* This is to ignore the "display: `${isBlock}`" below as it threw an error. */}
          <Text style={{ display: `${isBlock}`, color: "white", marginTop: 5 }}>{event.details}</Text>
        </View>
        {isDetailed ? (
          <Ionicons
            name="chevron-up"
            color={Colors.primary}
            size={25}
            key={index}
          />
        ) : (
          <Ionicons
            name="chevron-down"
            color={Colors.primary}
            size={25}
            key={index}
          />
        )
        }
      </Card>
    </TouchableOpacity>
  )
}

export default ParentComponent({navigation}){

  const events = [
    { title: 'Maths Exam', date: '2023-04-17', time_start: "HH:MM", time_end: "HH:MM", duration: "HH:MM", teacher: "Ms. Sonila", details: "Lorem Ipsum Dolor Sit amet" },
    { title: 'English Quiz', date: '2023-04-17', time_start: "HH:MM", time_end: "HH:MM", duration: "HH:MM", teacher: "Ms. Morena", details: "Lorem Ipsum Dolor Sit amet" },
    { title: 'Albanian Essay', date: '2023-04-17', time_start: "HH:MM", time_end: "HH:MM", duration: "HH:MM", teacher: "Ms. Junilda", details: "Lorem Ipsum Dolor Sit amet" },
    { title: 'Albanian Project', date: '2023-04-17', time_start: "HH:MM", time_end: "HH:MM", duration: "HH:MM", teacher: "Ms. Junilda", details: "Lorem Ipsum Dolor Sit amet" },
    { title: 'Albanian Something', date: '2023-04-17', time_start: "HH:MM", time_end: "HH:MM", duration: "HH:MM", teacher: "Ms. Junilda", details: "Lorem Ipsum Dolor Sit amet" },
  ];

  ...

  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().slice(0, 10));
  let currentDate = (new Date()).toISOString().split('T')[0]
  let dateSelected = (selectedDate.replaceAll("-", " ")).split(" ").reverse().join(" ");
  const getEventsForDay = (date) => {
    return events.filter((event) => event.date === date);
  };
  const onDayPress = (day) => {
    setSelectedDate(day.dateString);
  };

  ...

  return(
    <>
      <Text style={styles.eventsTitle}>Events for {dateSelected}:</Text>
      <ScrollView style={{ height: (calendarHeight / 1.5) + 15 }} showsVerticalScrollIndicator={false}>
        {getEventsForDay(selectedDate).map((event, index) => (
          <EventComponent 
            event={event}
            index={index}
          />
        ))}
      </ScrollView>
    </>
  )
}