为什么在使用 Ant Tree Design 的子组件中没有选中树复选框

Question

我想弄清楚我在使用这个 Ant Tree component 时做错了什么。我有两个组件，PageAdmin，我调用它来获取有关树中哪些节点应标记为选中的信息。我从服务器接收数据并将其放入数组 checkedKeys 并将其作为道具 CustomTree 发送到子组件，我可以看到 CustomTree 组件的道具已正确更新，但树中的节点不是选择，加上当我选择另一个节点时，checkedKeys 数组被清除并仅替换为新选择的节点...

知道发生了什么吗？

PageAdmin.js

import React, { Component } from "react";
import TreeMenu from "./TreeMenu";
import CustomTree from "./CustomTree";
import axios from "axios";

import "./PageAdmin.css"

const BASE_URL = "http://localhost:3000"

class PageAdmin extends Component {
  constructor(props) {
    super(props);
    this.state = {
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      treeData: [],
      treeID: this.props.match.params.id
    }
  }

  componentDidMount() {
    axios
      .get(`${BASE_URL}/eclass/all-nodes`)
      .then(result => {
        this.setState({
          treeData: result.data
        });
      })
    if (this.state.treeID) {
      console.log("yes we have a treeID")
      axios
        .get(`${BASE_URL}/eclass/custom/${this.state.treeID}`)
        .then(result => {
          this.setState({
            checkedKeys: result.data.checkedKeys
          });
        });
    }
  }

  handleCheckChange = (checkedKeys) => {
    this.setState({ checkedKeys });
    console.log("checkedKeys", checkedKeys)
  }

  handleSelectChange = (selectedKeys) => {
    this.setState({ selectedKeys });
    console.log("selectedKeys", selectedKeys)
  }

  handleExpandChange = (expandedKeys) => {
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  }

  render() {
    return (
      <div>
        <TreeMenu treeID={this.state.treeID} checkedKeys={this.state.checkedKeys} />
        <CustomTree
          onCheckChange={this.handleCheckChange}
          onSelectChange={this.handleSelectChange}
          onExpandChange={this.handleExpandChange}
          checkedKeys={this.state.checkedKeys}
          expandedKeys={this.state.expandedKeys}
          selectedKeys={this.state.selectedKeys}
          autoExpandParent={this.state.autoExpandParent}
          treeID={this.state.treeID}
          treeData={this.state.treeData} />
      </div>
    );
  }
}

export default PageAdmin;

CustomTree.js

import React, { Component } from "react";
import { Tree } from 'antd';
import "./CustomTree.css"
import 'antd/dist/antd.css'

const TreeNode = Tree.TreeNode;

class CustomTree extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  onExpand = (expandedKeys) => {
    console.log('onExpand', arguments);
    // console.log('expandedKeys', expandedKeys);
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.

    this.props.onExpandChange(expandedKeys)
  }
  onCheck = (checkedKeys) => {
    // console.log('onCheck', checkedKeys);
    this.props.onCheckChange(checkedKeys);
  }
  onSelect = (selectedKeys, info) => {
    // console.log('info', info);
    // console.log("selectedKeys", selectedKeys)
    this.props.onSelectChange(selectedKeys);
  }

  renderTreeNodes = (data) => {
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode {...item} />;
    });
  }

  render() {
    return (
      <Tree
        checkable
        onExpand={this.onExpand}
        onCheck={this.onCheck}
        onSelect={this.onSelect}
        checkedKeys={this.props.checkedKeys}
        expandedKeys={this.props.expandedKeys}
        autoExpandParent={this.props.autoExpandParent}
        selectedKeys={this.props.selectedKeys}
      >
        {this.renderTreeNodes(this.props.treeData)}
      </Tree>
    );
  }
}

export default CustomTree;

Answer 1

我发现了这个错误，我想分享我是如何解决它的。

在我首先获得树节点数据之前，我获得了有关选择了哪些节点的信息。我必须同时发出请求和更新状态，因为每个节点 (TreeNode) 都有像 checked 和 halfChecked 这样的道具，以前没有更新过，但现在正在处理下面的变化代码。

  componentDidMount() {
    axios
      .get(`${BASE_URL}/eclass/all-nodes`)
      .then(allNodes => {
        if (this.state.treeID) {
          console.log("yes we have a treeID")
          axios
            .get(`${BASE_URL}/eclass/custom/${this.state.treeID}`)
            .then(dataCheckedKeys => {
              this.setState({
                checkedKeys: dataCheckedKeys.data.checkedKeys,
                nameOfTree: dataCheckedKeys.data.nameOfTree,
                treeData: allNodes.data
              });
            });
        } else {
          this.setState({
            treeData: allNodes.data
          });
        }
      })
  }

Answer 2

也许您需要正确设置属性 checkedKeys 和 checkStrictly。

checkedKeys:(Controlled)指定选中的treeNodes的key（PS:当指定一个treeNode的key，同时也是父treeNode时，其所有的children treeNodes将被checked；反之，当指定一个treeNode的key为子treeNode时，其父treeNode也会被checked，当checkable和checkStrictly为true时，其对象有checked和halfChecked属性。无论子树节点还是父树节点都被勾选，它们不会相互影响。

观看 antd 的文档以获取更多信息 https://ant.design/components/tree/

为什么在使用 Ant Tree Design 的子组件中没有选中树复选框

Why is not tree checkboxes checked in the child component using Ant Tree Design

javascript

tree

reactjs

antd