Question

91

React Hook useEffect issue with setState

rated 0 times [ 94] [ 3] / answers: 1 / hits: 12633 / 4 Years ago, fri, january 24, 2020, 12:00:00

I am using useState which has 2 array imageList and videoList and then in useEffect hook i am using forEach on data then if type is image then push to item to image .
But at last i am not getting imagelist or video list of array.

const [list, setDataType] = useState({imageList:[], videoList:[] });

  useEffect (()=>{

    //data is list of array

      dataList.forEach(item =>{



       if(!item.images)  {

         setDataType({...list, imageList:item})

       } 

       else if (item.images[0].type === video/mp4)

       {

        setDataType({...list, videoList :item})

       }

       else if((item.images[0].type === images/gpeg)

       {

          setDataType({...list, imageList:item})

       }

      })

  },);

Here type check is working correctly but at last i get last fetch data only which can be videolist or imageList
In last i should get list of all imageList whose type is image and same video list whose type is video

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

susanajamiep

Add To Favorites

Follow

Total Points: 466

Total Questions: 113

Total Answers: 108

Location: Liberia

Member since Fri, Oct 22, 2021

3 Years ago

susanajamiep questions

1 how can I add menu button in telegram bot

Sun, Jun 12, 22, 00:00, 2 Years ago

1 'TypeError: Cannot set properties of undefined (setting '0')'----Array assignment

Sat, Apr 16, 22, 00:00, 2 Years ago

1 Setting cors in strapi 4

Mon, Mar 7, 22, 00:00, 2 Years ago

1 Dynamic import of react hooks

Wed, Jun 10, 20, 00:00, 4 Years ago

1 How to reload a specific DIV Element with the help of button click?

Fri, Jan 10, 20, 00:00, 4 Years ago

View All

answered 4 Years ago antonb · Accepted Answer

It is not a proper way to call setState in a loop. Below is an attempted solution using array method filter to functionally construct the list.

const [list, setDataType] = useState({ imageList: [], videoList: [] });

useEffect(() => {

    let videos = dataList.filter(item => item.images[0].type === video/mp4)

    let images = dataList.filter(item => item.images[0].type === images/gpeg)

    setDataType({imageList: images, videoList: videos})

}, []);