react复选框树没有展开

Question

我是新来的反应。我用react复选框树包创建了一个复选框树。问题是，当我单击树中的一个项目时，它不会在应该展开的时候展开。

我能做什么改变来修复它呢？

提前谢谢..。

下面是应用程序的沙箱链接：沙盒

这是我的JSON数据库：

[
    {
    "mailProcessingCenters": [
      {
        "value": "AEAUHA",
        "name": "ABU DHABI"
      },
      {
        "value": "AEDXBA",
        "name": "DUBAI"
      },
      {
        "value": "AEDXBB",
        "name": "DUBAI RASID SEA-PORT"
      },
      {
        "value": "AEDXBD",
        "name": "DUBAI TRANSIT / HUB"
      },
      {
        "value": "AEDXBE",
        "name": "DUBAI - SOMALIA"
      },
      {
        "value": "AUSYDK",
        "name": "SYDNEY K (EMIRATES - DIRECT LINK)"
      },
      {
        "value": "GBLONO",
        "name": "LONDON"
      },
      {
        "value": "SGSINO",
        "name": "SINGAPORE"
      },
      {
        "value": "SGSINQ",
        "name": "SINGAPORE Q, UAE"
      },
      {
        "value": "USCHIE",
        "name": "CHICAGO E"
      },
      {
        "value": "USJECU",
        "name": "NEW JERSEY U EMIRATES POST"
      }
    ],
    "value": "J1CAEA",
    "shortvalue": "AEA",
    "label": "EmiratesPost"
  },
  {
    "mailProcessingCenters": [
      {
        "value": "AFKBLA",
        "name": "KABUL"
      },
      {
        "value": "AFKBLC",
        "name": "KABUL C"
      },
      {
        "value": "AFKBLS",
        "name": "KABUL EMS SHAHEEN POST"
      }
    ],
    "value": "J1CAFA",
    "shortvalue": "AFA",
    "label": "Afghan Post"
  },
  {
    "mailProcessingCenters": [
      {
        "value": "AGANUA",
        "name": "ST JOHNS, A, ANTIGUA AND BARBUDA"
      },
      {
        "value": "AGANUB",
        "name": "ST JOHNS, B, ANTIGUA AND BARBUDA"
      },
      {
        "value": "AGANUC",
        "name": "ST JOHNS, C, ANTIGUA AND BARBUDA"
      }
    ],
    "value": "J1CAGA",
    "shortvalue": "AGA",
    "label": "GPO Antigua"
  },
  {
    "mailProcessingCenters": [],
    "value": "J1CAIA",
    "shortvalue": "AIA",
    "label": "AnguillaPost"
  },
  {
    "mailProcessingCenters": [
      {
        "value": "ALTIAA",
        "name": "TIRANA ENTRANGER"
      }
    ],
    "value": "J1CALA",
    "shortvalue": "ALA",
    "label": "Albanian PT"
  },
  {
    "mailProcessingCenters": [
      {
        "value": "AMEVNA",
        "name": "YEREVAN"
      },
      {
        "value": "AMEVNB",
        "name": "YEREVAN PI-2"
      },
      {
        "value": "AMEVNC",
        "name": "YEREVAN PI-3"
      },
      {
        "value": "AMEVND",
        "name": "YEREVAN EMS"
      }
    ],
    "value": "J1CAMA",
    "shortvalue": "AMA",
    "label": "Haypost AM"
  },
  {
    "mailProcessingCenters": [],
    "value": "J1CANA",
    "shortvalue": "ANA",
    "label": "POST NA NV"
  }
]

这是我的App.js：

class App extends React.Component {
  state = {
    checked: [],
    expanded: [],
    database: db
  };

  render() {
    console.log(this.state);

    return (
      <div>
        <div onClick={secildi}>
          <CheckboxTree
            nodes={this.state.database}
            checked={this.state.checked}
            expanded={this.state.expanded}
            onCheck={checked => this.setState({ checked })}
            onExpand={expanded => this.setState({ expanded })}
          />
        </div>

        <div />
      </div>
    );
  }
}

Answer 1

您必须将mailProcessingCenters重命名为children，并且按照NicolóCozzani name的建议，必须将其重命名为label。

我可以在react复选框树演示中看到，他们需要子数组使其成为一棵被扩展的树。

const nodes = [{
    value: 'mars',
    label: 'Mars',
    children: [ //<--------this one
        { value: 'phobos', label: 'Phobos' }, // <----name should be renamed as label
        { value: 'deimos', label: 'Deimos' },
    ],
}];

更新代码沙箱。