如何在渲染组件和无法读取未定义的属性“ includes”之前从react.js获取数据？ [英] How to fetching data from react.js before render compontents and Cannot read property 'includes' of undefined?

问题描述

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

I have got two components, child components and parent components.

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

Here is data format is coming from database :

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

我将数据从父组件传递到子组件。当我将数据父对象传递给子组件时，我得到的错误是

I am going to pass data from parent component to child components . when I pass data parent to child compontent I got an error that is

 TypeError: Cannot read property 'includes' of undefined

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

However, I saw data in the console.log(). Where is the problem of typeError can not undefined ? If I worked with static data, There is no problem . Everyting is worked perfectly .

• app.js（父组件）

• app.js(parent compontent)

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

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

This is my child components (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;
  };

这些方法适用于每个小组，例如这是我的两个角色-一个是小组，另一个是

these method is work for each group such as here is my two roles - one is group and another is 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 * /

/** * these method is work for single item such as 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>

此功能适用于基于组的复选框

this is worked for group based 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)}
                    />

            ))}

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

How can I resolve Cannot read property 'includes' of undefined ?

推荐答案

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

How can I resolve Cannot read property 'includes' of undefined ?

权限[标签] 需要在 isAllChecked 函数中定义，但初始 state.permissions 看起来像是空对象。

permission[label] needs to be defined in isAllChecked function, but initial state.permissions looks like it is empty object.

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)
  );
};

这篇关于如何在渲染组件和无法读取未定义的属性“ includes”之前从react.js获取数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！