问题描述
我有两个组件，子组件和父组件。
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 ?
推荐答案
权限[标签] 需要在 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获取数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！