获得未定义是不可迭代的（无法读取属性 Symbol(Symbol.iterator)）

Question

Learning React by coding, here i got this error (Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) ), dont know where is the problem, any suggestion?

simply useEffect activates setFilteredData which gives: `

{
links: [
  {
    color: 'red'
  },
],
nodes: [
  {
    focused: focused
  },
],
};

`

i want to take that data and change it a little, like my logic is, color should be grey or red if id's matches and also focus should be focus if id's matches, english is not my mother language so could be mistakes. any ideas? i hope my question is clear, if needs to add something or not clear, just tell me.

 const [filteredData, setFilteredData] = useState(); const LINK_COLOR = "grey"; const LINK_FOCUS_COLOR = "red"; useEffect(() => { const filterData = () => { setFilteredData({ links: links, nodes: allNodes }); }; filterData(); }, [...]); const focusLinkId = currentLink? currentLink.id: ""; const focusNodeId = currentNode? currentNode.id: ""; const graphData = {...filteredData, links: [...filteredData?.links, { color: filteredData?.links?.map((l) => { const color = l?.id === focusLinkId? LINK_FOCUS_COLOR: LINK_COLOR; return color; }), }, ], nodes: [...filteredData?.nodes, { focused: filteredData?.nodes?.map((n) => { const focused = n?.id === focusNodeId; return focused; }), }, ], }; console.log("graphData:", graphData); <Graph id="graph-id" data={graphData? graphData: visualGraph.model} />

Answer 1

As said in the comments, filteredData is undefined until the response comes back

This should help:

const graphData = filteredData && { /* ... */ }