我有一个MyList组件,我在其中根据指定的日期进行搜索,并使用Flatlist呈现详细信息
const MyList =( {date}) =>{
const [list, setList] = useState([]);
useEffect(() => {
const url = `https://some-service.com/list?date=${date}`
axios.get(url).then((res) => {
setList(res.data.result);
});
}, [date])
return (
<FlatList
data={list}
extraData={list}
renderItem={({item}) => (<RenderItem item={item}/>)}
keyExtractor={(item) => item._id}
></FlatList>
)
}
在父组件中更新日期时,它将传递给MyList子组件
//...some code...//
const [date, setDate] = useState(moment().format('YYYY-MM-DD'));
return (
<View style={styles.container}>
<View style={styles.dateSelector}>
<DateSelector date={date} setDate={setDate} />
</View>
<MyList date={date} />
</View>
);
现在,当我更改日期时,将获取新的数据集并以列表状态存储,但FlatList不会重新呈现以显示更改。
注意:以下是服务调用的示例输出。当我们进行rest调用时,结果数组具有相同数量的元素,具有类似的“_id”、“name”。唯一的区别是“somelist”的值
日期:2022年12月4日
{
"status": "Success",
"result": [
{
"_id": "638b3ddc1b11677f6202eb4c",
"name": "John Doe",
"somelist": [
{
"date": "2022-12-04T00:00:00.000Z",
"status": "good"
}
]
},
{
"_id": "638b3ddc1b11677f6202eb4f",
"name": "Pappu",
"somelist": [
{
"date": "2022-12-04T00:00:00.000Z",
"status": "bla"
}
]
}
.....
日期:2022年12月3日
{
"status": "Success",
"result": [
{
"_id": "638b3ddc1b11677f6202eb4c",
"name": "John Doe",
"somelist": [
{
"date": "2022-12-03T00:00:00.000Z",
"status": "bad"
}
]
},
{
"_id": "638b3ddc1b11677f6202eb4f",
"name": "Pappu",
"somelist": [
{
"date": "2022-12-04T00:00:00.000Z",
"status": "good"
}
]
}
.....
我已经尝试使用extraData,但我仍然有同样的问题。
extraData ={list}
2条答案
按热度按时间lb3vh1jj1#
00jrzges2#
乍一看,我相信这可能是由于你如何设置状态。因此:
setList(资源.数据.结果)
应道:
setList([...列表,资源数据结果])