useState() not rendering from redux, elements disappear

Hi guys, for some weird reason, state is not updating based on updates from redux. I’ve implemented the following.

FC<...Props> = ({ dispatch, data }) => {
  const [dataState, setDataState] = useState(data);

  useEffect(() => {
    setDataState(data);
  }, [dispatch, data]);
  
  return(
    <ReactFlowProvider>
       <ReactFlow elements={dataState}
     ...
  )
}

And, in my Reducer. I would push a new element using:

case 'CREATE_ITEM':
      return update(
        state,
        {
          map: {
            counter: { $set: state.map.counter + 1 },
            data: {
              $push: [{
                id: state.map.counter + 1,
                className: `context-${state.map.counter + 1}`,
                animated: true,
                type: 'default',
                ...
              }],
            }
          },
        },
      );

In essence, after I update the state again. All elements disappear from the canvas.

---

Curious if you guys had any feedback, thank you!

[joriskalz]

I had the same issue, my problem was not to append the item to the existing array. Try the following for adding new items:

useEffect(() => {
      setDataState(e => e.concat( data.map(m => ({ id: m.id, position: m.position, data: { label: m.data.label }, style: { border: m.style.boder, background: m.style.background } }))
) );
}, [dispatch, data]);

[moklick]

closed due to inactivity