React concat current state(array) with another array using useState

Question

The initial state in my component is an array of objects. I am using Redux to fetch another array of objects, as you can see in my below code. I am checking that outCalls is true, if it is I am creating a new array of objects that can be joined with the state.

However in my dependencies array it says I am missing data. If I add it, it creates a mad loop and I get errors. As it currently is, the array of objects doesn't get joined to the state.

useEffect(() => {
        if(outCalls) {
            const transformedOutgoingCalls = outCalls.filter(call => call.contractor._id === props.contractor._id).map(c => ({
                type: 'Outgoing Call',
                contact_person: c.contact_person,
                logged_by: c.created_by.name,
                date: c.time_created,
                link: <> <LinkContainer to={`/outgoing-calls/${c._id}`} className='text-success' style={{ cursor: 'pointer'}}><Eye /></LinkContainer> </>
            }))
            const newData = [...data, transformedOutgoingCalls]
            setData(newData)
        }
    }, [outCalls, props.contractor._id])

Try to change setData to its callback version, in which you have access to the previous state, and useEffect will no longer complain setData(prevData => [...prevData, tranformedOutgoingCalls]) — devnull69
– devnull69, Commented May 21, 2021 at 13:43
when the contractor._id is 1 your state will have a list only with contractor._id 1 info . Now if the contractor._id is 2 does your state have a list with both the contractors info or just contractor 2 info ? — Shyam
– Shyam, Commented May 21, 2021 at 14:07
@Shyam Just contractor 2, so it is getting the right data in terms of the contractor id, just duplicating it when i return to the page — BranOIE
– BranOIE, Commented May 21, 2021 at 15:44

Priyank Kachhela · Accepted Answer · 2021-05-21 13:39:11Z

2

You can set state in useEffect without declaring data as dependency like below:-

useEffect(() => {
        if(outCalls) {
            const transformedOutgoingCalls = outCalls.filter(call => call.contractor._id === props.contractor._id).map(c => ({
                type: 'Outgoing Call',
                contact_person: c.contact_person,
                logged_by: c.created_by.name,
                date: c.time_created,
                link: <> <LinkContainer to={`/outgoing-calls/${c._id}`} className='text-success' style={{ cursor: 'pointer'}}><Eye /></LinkContainer> </>
            }))
            setData(prevData => [...prevData, ...transformedOutgoingCalls]);
        }
    }, [outCalls, props.contractor._id])

answered May 21, 2021 at 13:39

Priyank Kachhela

2,64511 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

BranOIE Over a year ago

Perfect, thank you so much! Will accept when it lets me

BranOIE Over a year ago

There is actually a problem happening, if I navigate to a page and go back, it does it again and adds it on top of what was already there. So everything is now there twice. I tried adding another useEffect at the top and put setData([]) but nothing changes

Shyam Over a year ago

The only thing i see here is having the outCalls as a dependency . since outCalls is an array its reference should not be changing between the re-renders else it will lead to infinite re-render causing maximum depth exceeded error .

Shyam Over a year ago

where you are getting the outCalls from ? . Is it from redux ?

BranOIE Over a year ago

@Shyam Yes. It says outCalls needs to be a dependency

|

Shyam · Accepted Answer · 2021-05-21 15:54:36Z

0

Since your state is dependent on outCalls and props.contractor._id . Instead of having a state exclusively you can just have a variable.

// read the data from the store
const outCalls = useSelector(....); 


// since the component re-render when ever there is change in props. Whenever your
// props.contractor._id changes we run this function and get the updated data.

const data = useMemo(() => {
   const transformedOutgoingCalls = outCalls.filter(call => call.contractor._id === props.contractor._id).map(c => ({
        type: 'Outgoing Call',
        contact_person: c.contact_person,
        logged_by: c.created_by.name,
        date: c.time_created,
        link: <> <LinkContainer to={`/outgoing-calls/${c._id}`} className='text-success' style={{ cursor: 'pointer'}}><Eye /></LinkContainer> </>
    }));

    return transformedOutgoingCalls
}, [outCalls, props.contractor._id])

answered May 21, 2021 at 15:54

Shyam

5,5071 gold badge15 silver badges23 bronze badges

1 Comment

BranOIE Over a year ago

It needs to be in state because there is multiple instances where I have to append to data. So like outcalls, there is more things in the store i need to fetch also and do the same with

Collectives™ on Stack Overflow

React concat current state(array) with another array using useState

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related