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

Question

我正在尝试使用 Ant Tree component 找出我做错了什么。 我有两个组件，PageAdmin 我做一个 get 调用来获取关于树中哪些节点应该被标记为选中的信息。我从服务器接收数据并将其放入数组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

也许您必须正确设置属性checkedKeys 和checkStrictly。

checkedKeys：（受控）指定被检查的treeNodes的key（PS：当这指定一个treeNode的key同时也是一个父treeNode时，它的所有子treeNodes都会被检查；反之亦然，当它指定一个treeNode的key，它是一个子treeNode，它的父treeNode也会被检查。当checkable和checkStrictly为true时，它的对象有checked和halfChecked属性。不管是child还是parent treeNode 被勾选，它们不会互相影响。

更多信息请观看 antd 文档https://ant.design/components/tree/

Answer 2

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

在我第一次获得树节点数据之前，我获得了有关选择了哪些节点的信息。我必须同时发出请求和更新状态，因为每个节点 (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
          });
        }
      })
  }