[英]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
However, I saw data in the console.log().但是,我在console.log() 中看到了数据。 Where is the problem of typeError can not undefined ? typeError can not undefined 的问题在哪里? If I worked with static data, There is no problem .如果我使用静态数据,则没有问题。 Everyting is worked perfectly .一切都完美无缺。
app.js(parent compontent) app.js(父组件)
<UserPermission userPermissionList={this.state.userPermissionList} />
This is my child components (UserPermission.js)这是我的子组件(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.这些方法适用于每个组,例如这里是我的两个角色 - 一个是组,另一个是 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));
};
/** * these method is work for single item such as can_view,can_delete,can_update */ /** * 这些方法适用于单个项目,例如 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 } });
};
Here is three checkbox这是三个复选框
Rendering UI :渲染界面:
this is going to selected All checkbox .这将选中所有复选框。
<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>
this is worked for singe checkbox这适用于单一复选框
<CheckboxGroup
options={this.state.groupItems}
value={this.isChecked(label)}
onChange={this.onChange(label)}
/>
))}
How can I resolve Cannot read property 'includes' of undefined ?如何解决无法读取 undefined 的属性“包含”?
How can I resolve Cannot read property 'includes' of undefined ?如何解决无法读取 undefined 的属性“包含”?
permission[label]
needs to be defined in isAllChecked
function, but initial state.permissions
looks like it is empty object.需要在isAllChecked
函数中定义permission[label]
,但是初始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)
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.