为什么我无法从React下拉树选择中恢复所选项目

Question

我在从ReactDropdownTreeSelect中恢复值时遇到了各种问题。这个组件似乎保持了它的状态，直到我想保存更改的结果。无论我如何尝试这样做，组件都会丢失它的状态，并且没有选择任何内容。我错过了什么

例如，nearly identical to the one in the help，它显示了问题所在。一句话打破了它..。

import React, { useState, useEffect } from "react"
import DropdownTreeSelect from "react-dropdown-tree-select"

function DebugSelector() {
    const [mySelected, setMySelected] = useState([]);
    const [lastChanged, setLastChanged] = useState({});

    const tarifs = {
        label: "all tarifs", value: "all", children: [
            { label: "second level tarif", value: "secondLevel" },
            { label: "another 2nd level", value: "secondLevel2" }
        ]
    }
    const onChange = function (currNode, selectedNodes) {
        debugger
        // Any of these lines will break it. The component loses its state.
        //setMySelected(selectedNodes);
        //setMySelected([...selectedNodes]);
        //setLastChanged(currNode);
        setLastChanged(JSON.parse(JSON.stringify(currNode)))
    }
    return (
        <DropdownTreeSelect data={tarifs} onChange={onChange}></DropdownTreeSelect>
    )
}
export default DebugSelector;

Answer 1

看起来setLastChanged没有定义，所以它会产生一个错误。

此外，如果调用setMySelected，组件将被重新呈现，并且基于代码，DropdownTreeSelect没有更新的值的属性，我认为您应该做的是在完成任何更改时更新tarifs，因此，类似于：

const [tarifs, setTarifs] = useState({
  label: foo, value: bar, children: [baz]
})

const onChange = function (currNode, selectedNodes) {
  setTarifs(currNode);
}

return <DropdownTreeSelect data={tarifs} onChange={onChange}/>;