Question

我有一个FlatList视图，其中每个项目都有一个复选框。当我按下一个复选框时，状态会从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 });
}

Answer 1

您正在更改状态可能是问题的原因。最好克隆分支状态并更新克隆的分支，最后更新setState。

const clonedBranches = JSON.parse(JSON.stringify(this.state.branches));
const updatedBranch = clonedBranches.find(({_id}) => _id === id)
updatedBranch=!updatedBranches.checked;
this.setState({branches: clonedBranches})

Answer 2

内部toggleCheckbox

this.setState({ branches: checkboxes });

但是您正在使用分支的FlatList中获取数据

 <FlatList
  data={this.state.branches}

当您调用toggleCheckbox时，分支数组将更新。得到它了？

一旦在本机中更改状态，“平面列表”将被隐藏

2 个答案: