為什么我無法更新我的反應組件的狀態？

Question

我在嘗試更新我的反應功能組件的狀態時遇到了一些問題。 我已經將我的組件設置為這樣的鈎子狀態。

function Tree(){


const [data,setData] = useState({
    id:1,
    label:'Root',
    children:[

    ],
    styles:{
        border:"1px solid green",
        padding:"10px 20px",
        position:"absolute",
        left:"45%",
        top:"20%",
  
      },
    content:{

    }
})




function addNode(parentId,nodeData){
    const newData = data;
    addChild(newData,parentId,nodeData)
    setData(newData);
}

function addChild(node,parentId,nodeData){
    if(parentId == node.id){
        
        node.children.push(nodeData);
        
     
         
    }else{
        //console.log("looking trough nodes")
        setNewState(node.children,parentId,nodeData)
    }
}

function deleteNode(nodeId){
    
}

console.log("rendering")

return (<>
    <Node children={data.children} styles={data.styles} addNode={addNode}></Node>
</>)
}

我通過 props 將 addNode 方法傳遞給 Node 組件，並且在 node 組件中剛剛在單擊事件中調用它。 我還使用遞歸函數來獲取新的狀態值，創建新值沒有問題，但我調用了狀態函數並且它不呈現組件。 我不知道狀態沒有更新的原因可能是什么。 如果一些反應經驗不能幫助我解決這個問題，我會非常高興。 addNode 函數接受一個 id 和要添加的值。 addChild 方法遞歸地查找節點並將值推送到其自身的子鍵中。 pd：對不起，我的英語不好。

Answer 1

最好的做法是永遠不要改變 React 狀態，你正在用node.children.push做這件事，因為node是對狀態data的引用。

我建議addChild應該完全返回一個新對象， setData將使用它來調用。 或者我不明白為什么addChild不能調用setData本身。 但是無論哪種方式都應該克隆data ，並且克隆應該被改變並傳遞給setData 。

此外，由於 React 的功能特性，最好不要讓函數像addChild那樣改變它們的參數。

Answer 2

function addNode(parentId,nodeData){
   const newData = {...data};
   addChild(newData,parentId,nodeData)
   setData(newData);
}