SetState 在react-dropdown-tree-select 上不起作用

Question

我正在尝试使用“react-dropdown-tree-select”包在 React 应用程序中实现树形下拉菜单，并且在我们尝试更改状态之前它一直没有问题。

import React, { useState, useEffect } from 'react';
import DropdownTreeSelect from 'react-dropdown-tree-select';
import 'react-dropdown-tree-select/dist/styles.css';

function TreeDropDown(props) {
  const { tree_unit_data, handleTreeUnitListChange } = props;
  const [treeData, setTreeData] = useState(tree_unit_data);

  useEffect(() => {
    // Update the treeData when tree_unit_data prop changes
    setTreeData(tree_unit_data);
  }, [tree_unit_data]);

  const onChange = (currentNode, selectedNodes) => {
    // Handle the onChange event here
    handleTreeUnitListChange(selectedNodes) //This will break the DropdownTreeSelect and if we comment this it work
  };

  return (
    <DropdownTreeSelect
      data={treeData}
      onChange={onChange}
      texts={{ placeholder: 'Select Node' }}
    />
  );
}

export default TreeDropDown;

我什至尝试在这个组件中设置状态，它也产生了相同的结果

const onChange = (currentNode, selectedNodes) => {
  // Handle the onChange event here
  setTreeUnits(selectedNodes)
};

不知何故，只要状态发生变化，它就会重新渲染。我对这个问题有些困惑，如果有人可以帮助识别和解决问题，我将不胜感激。

单击下拉菜单时也会出现上述异常

出于测试目的，可以使用此数据

const treeData = [
  {
    label: 'Node 1',
    children: [
      {
        label: 'Node 1.1',
      },
      {
        label: 'Node 1.2',
        children: [
          {
            label: 'Node 1.2.1',
          },
          {
            label: 'Node 1.2.2',
          },
        ],
      },
    ],
  },
  {
    label: 'Node 2',
    children: [
      {
        label: 'Node 2.1',
      },
      {
        label: 'Node 2.2',
      },
    ],
  },
];

反应版本：18.2 节点版本：18.15.0 NPM 版本：9.5.0

Answer 1

不要在

useEffect

钩子内设置状态。它可能会导致无限循环，因为设置状态将导致重新渲染，这又会触发

useEffect

，依此类推。

如果不确切知道

handleTreeUnitListChange()

的作用，就很难回答你的问题。我将做出一个巨大的假设，它将

selectedNodes

存储在父组件中，然后使用

data

属性渲染

checked

，具体取决于用户是否刚刚选择或取消选择该节点。

如果确实如此，那么您根本不需要在该组件中使用状态！删除您调用

useState()

的行以及整个

useEffect()

回调。

如果不是这种情况，您应该将

data

状态存储在有意义的地方，并根据

onChange()

的返回值修改它。它甚至可能在这个组件中。确保已选择的

data

中的对象具有

checked

属性。