React Native 在axios/API调用后,FlatList未使用新数据重新呈现

taor4pac  于 2022-12-04  发布在  React
关注(0)|答案(2)|浏览(161)

我有一个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}
lb3vh1jj

lb3vh1jj1#

useEffect(() => {
   
    const url = `https://some-service.com/list?date=${date}`

    axios.get(url).then((res) => {

      setList(res.data.result);
    });
    
    return [...list]

}, [date])
00jrzges

00jrzges2#

乍一看,我相信这可能是由于你如何设置状态。因此:
setList(资源.数据.结果)
应道:
setList([...列表,资源数据结果])

相关问题