FlatList not getting rerendered with new data after axios/API call-CodePudding

I have a MyList Component where I search based on date specified and render the detail using 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>
    )
}

When date is updated in parent it is passed to child component 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>
);

Now when I change the date.. new set of data is fetched and stored in list state.. But FlatList is not getting rerendered to show the changes.

NOTE: Below is the sample output of service call. When we make rest call, the result array is having same number of elements, with similar "_id", "name".. the only difference is value of "somelist"

For Date 2022-12-04

{
    "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"
                }
            ]
        }
        .....

For Date 2022-12-03

{
    "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"
                }
             ]
        }
          .....

I have tried using extraData, but still i have having same issue.

extraData ={list}

CodePudding user response：

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

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

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

}, [date])

CodePudding user response：

At glance I believe it may be due to how you’re setting state. So:

setList(res.data.result)

Should be:

setList([…list, res.data.result])