如何在渲染组件之前从react.js获取数据，并且无法读取未定义的属性'includes？

Question

我有两个组件，子组件和父组件。

这里数据格式来自数据库：

 {permissible_objects :["group", "topGroup"],all_permissions: ["can_view","can_create"]}

我将数据从父组件传递到子组件。当我将数据父对象传递给子组件时，出现了一个错误，即>

 TypeError: Cannot read property 'includes' of undefined
但是，我在console.log（）中看到了数据。 typeError问题不能在哪里定义？如果我使用静态数据，那没有问题。一切都进行得很完美。 

• app.js（父组件）

      <UserPermission
        userPermissionList={this.state.userPermissionList}
      />
  

这是我的子组件（UserPermission.js）

     state = {
      permission: {}

    };
  UNSAFE_componentWillMount() {
    this.setState({
      userPermissionList: this.props.userPermissionList,
      groupItems:
        this.props.userPermissionList &&
        this.props.userPermissionList.all_permissions &&
        this.props.userPermissionList.all_permissions.map(item => item.value)
    });
    this.setDefault(false);
  }

  setDefault = fill => {
    const temp = {};
    this.state.userPermissionList &&
      this.state.userPermissionList.permissible_objects &&
      this.state.userPermissionList.permissible_objects.forEach(
        x => (temp[x] = fill ? this.state.groupItems : [])
      );
    this.setState({ permission: temp });
  };
  checkLength = () => {
    const { permission } = this.state;
    let sum = 0;
    Object.keys(permission).forEach(x => (sum += permission[x].length));
    return sum;
  };

  isTotalIndeterminate = () => {
    const len = this.checkLength();
    return len > 0 && len < this.state.groupItems.length * group.length;
  };
  onCheckTotalChange = () => e => {
    this.setDefault(e.target.checked);
  };
  isTotalChecked = () => {
    return this.checkLength() === this.state.groupItems.length * group.length;
  };
这些方法适用于每个组，例如这是我的两个角色-一个是组，另一个是topGroup。

  isIndeterminate = label => {
    const { permission } = this.state;
    // undefined !== theHref && theHref.length
    return permission[label] && permission[label].length !== undefined
      ? permission[label].length > 0 &&
          permission[label].length < this.state.groupItems.length
      : null;
  };
  onCheckAllChange = label => e => {
    const { permission } = this.state;
    const list = e.target.checked ? this.state.groupItems : [];
    this.setState({ permission: { ...permission, [label]: list } });
  };
  isAllChecked = label => {
    const { permission } = this.state;
    console.log(label);
    return !this.state.groupItems.some(x => !permission[label].includes(x));
  };
/ ** *这些方法适用于单个项目，例如can_view，can_delete，can_update * /

  isChecked = label => {
    const { permission } = this.state;
    return permission[label];
  };

  onChange = label => e => {
    const { permission } = this.state;
    this.setState({ permission: { ...permission, [label]: e } });
  };
这里是三个复选框

渲染UI：

这将选中所有复选框。

          <Checkbox
            indeterminate={this.isTotalIndeterminate()}
            onChange={this.onCheckTotalChange()}
            checked={this.isTotalChecked()}
          >
            All
          </Checkbox>
这适用于基于组的复选框

          {permissible_objects &&
            permissible_objects.slice(0, 3).map((label, index) => (

                    <label>{label}</label>

                      <Checkbox
                        indeterminate={this.isIndeterminate(label)}
                        onChange={this.onCheckAllChange(label)}
                        checked={this.isAllChecked(label)}
                      >
                        {label}
                      </Checkbox>
此功能适用于单一复选框

                    <CheckboxGroup
                      options={this.state.groupItems}
                      value={this.isChecked(label)}
                      onChange={this.onChange(label)}
                    />

            ))}
我该如何解决无法读取未定义的属性'includes'？

我有两个组件，子组件和父组件。这是来自数据库的数据格式：{permissible_objects：[“ group”，“ topGroup”]，all_permissions：[“ can_view”，“ can_create” ...

Answer 1

我该如何解决无法读取未定义的属性'includes'？