Как извлечь данные из реакции. js перед рендерингом компонентов и не может прочитать свойство 'include' из неопределенного? - PullRequest
Новая
       33

Как извлечь данные из реакции. js перед рендерингом компонентов и не может прочитать свойство 'include' из неопределенного?

0 голосов
/ 20 марта 2020

У меня есть два компонента, дочерние компоненты и родительские компоненты.

Вот формат данных, поступающий из базы данных: 

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

Я собираюсь передать данные из родительского компонента в дочерний компоненты . когда я передаю данные parent родительскому компоненту, я получаю сообщение об ошибке 

 TypeError: Cannot read property 'includes' of undefined

Однако я вижу данные в console.log (). Где проблема typeError не может быть неопределена? Если я работал со stati c data, проблем нет. Все работает отлично.

  • приложение. 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 } });
  };

Вот три флажка

Интерфейс рендеринга:

это будет выбран флажок Все. 

          <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' из неопределенного?

1 Ответ

0 голосов
/ 20 марта 2020

Как я могу решить Не удается прочитать свойство 'includes' из неопределенного?

permission[label] необходимо определить в функции isAllChecked, но начальная state.permissions выглядит так, как она есть пустой объект. 

state = {
  permission: {}, // permission has no properties!!
};

...

isAllChecked = label => {
  const { permission } = this.state;
  console.log(label);
  return !this.state.groupItems.some(
    // check that permission[label] exists then check if it doesn't include `x`
    x => permission[label] && !permission[label].includes(x)
  );
};
...