我在每个项目中都有一个带有复选框的lactlist视图。当我按一个复选框时,状态从false更改为true当时列表被隐藏了。奇怪的行为。
<FlatList
data={this.state.branches}
renderItem={({ item }) => {
{ tempCheckValues[item._id] = false; }
return (
<ListItem avatar key={item._id}>
<Left>
<CheckBox
checked={item.checked}
onPress={this.toggleCheckbox.bind(this, item._id)}
/>
</Left>
<Body>
<Text>{item.branch_name}</Text>
<Text note>{item.formatted_address}</Text>
</Body>
</ListItem>
);
}
}
/>
复选框切换:
toggleCheckbox = (id) => {
const changedCheckbox = this.state.branches.find((branch) => branch._id === id);
console.log('changedCheckbox', changedCheckbox);
changedCheckbox.checked = !changedCheckbox.checked;
const checkboxes = Object.assign({}, this.state.checkboxes, changedCheckbox);
this.setState({ branches: checkboxes });
}
您正在突变状态可能是造成问题的原因。最好克隆分支状态并更新克隆的分支,然后最后设定。
const clonedBranches = JSON.parse(JSON.stringify(this.state.branches));
const updatedBranch = clonedBranches.find(({_id}) => _id === id)
updatedBranch=!updatedBranches.checked;
this.setState({branches: clonedBranches})
togglecheckbox
this.setState({ branches: checkboxes });
,但是您正在使用分支机构中获得数据
<FlatList
data={this.state.branches}
调用togglecheckbox时,将更新分支数组。知道了?