初始保存后，從 JSON 動態創建節點不起作用

Question

我是新手，嘗試使用基於 JSON 的 ReactFlow 動態創建節點。使用下面的代碼，我將保存我的 index.tsx 並按下一個調用 onAdd function 的按鈕，它會工作（創建預期的節點） . 但是，一旦我刷新瀏覽器，該按鈕就會停止工作。

function Flow() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const [newNodes, setNewNodes] = useState([])

  const handleClick = () => {
    fetch('/get_nodes')
    .then((r) => r.json())
    .then(data  => {
      console.log(data)
      setNewNodes(data)
    })
    
  } 
  
  const onAdd = useCallback(() => {
    handleClick()

    console.log(newNodes)


    setNodes((nds) => nds.concat(newNodes));
  }, [setNodes]);

我沒有嘗試太多，我一直在嘗試用谷歌搜索這個問題，除了上面列出的之外，我不知道如何描述我的問題。 這可能與 React 更相關，而不是特定於 ReactFlow。

Answer 1

許多描述為“component X works only one time”的 React 錯誤與 React 的依賴項 arrays 相關。

這些是 arrays 傳遞給掛鈎，通常作為第二個參數，它告訴掛鈎它不應該重新渲染，除非數組的一個元素已經改變（通常這種技術用於性能起見，避免在輸入相同時重做昂貴的計算). 這個數組存在於許多鈎子中，例如useEffect 、 useCallback ( https://reactjs.org/docs/hooks-reference.html#usecallback )、 useMemo 。

在您的代碼中，只要nodes發生更改，就應調用onAdd ，但您將setNodes作為依賴項傳遞。 考慮到setNodes指的是 setter function，而不是節點本身，並且考慮到 setter function 在添加節點時不會更改，因此onAdd僅在第一次被調用，之后再也不會被調用。

為了解決這個問題，它只是向你的useCallback解釋它取決於nodes ，而不是它的 setter function：

const onAdd = useCallback(() => {
    //Inner logic
}, [nodes]); // changed here