数组.map不能在原生函数组件中渲染

Question

我试图用循环渲染组件。我用的是数组。映射到函数组件的JSX返回块中。该组件将呈现包含在名为"mountDates"的列表中的每个单独日期。但它并没有渲染这些物品。下面是我的代码:

import React, {useEffect} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {globalStyles} from '../../styles/global';
import AgendaItem from './agendaItem';
export default function Agenda({onDayChange, startDate, endDate}) {
const mountDates = [];
useEffect(() => {
const getDates = (startDate, endDate) => {
let currentDate = startDate;
console.log(startDate, endDate);
while (currentDate.getTime() <= endDate.getTime()) {
mountDates.push(new Date(currentDate));
currentDate.setDate(currentDate.getDate() + 1);
}
};
getDates(startDate, endDate);
}, []);
return (
<View style={styles.container}>
{mountDates.map((date, i) => {
return <AgendaItem key={i.toString()} date={date} />;
})}
</View>
);
}

Answer 1

直接使用React.useState。这将触发重新渲染当所有的数据设置。

import {View, Text, StyleSheet} from 'react-native';
import {globalStyles} from '../../styles/global';
import AgendaItem from './agendaItem';
export default function Agenda({onDayChange, startDate, endDate}) {
const [mountDates, setMountDates] = React.useState([]);

useEffect(() => {
const tempMountDates = [];
const getDates = (startDate, endDate) => {
let currentDate = startDate;
console.log(startDate, endDate);
while (currentDate.getTime() <= endDate.getTime()) {
tempMountDates.push(new Date(currentDate));
currentDate.setDate(currentDate.getDate() + 1);
}
};
getDates(startDate, endDate);
setMountDates();
}, []);
return (
<View style={styles.container}>
{mountDates.map((date, i) => {
return <AgendaItem key={i.toString()} date={date} />;
})}
</View>
);
}