一旦状态在本机反应中发生变化，平面列表就会被隐藏

Question

我有一个带有每个复选框的 FlatList 视图 item.when 我按下一个复选框，状态从 false 变为 true，此时列表变为 hidden.Does 任何人都经历过这种奇怪的行为.

<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

在 toggleCheckbox 里面

this.setState({ branches: checkboxes });

但是您在带有分支的 FlatList 中获取数据

 <FlatList
  data={this.state.branches}

当您调用 toggleCheckbox 时，branches 数组会更新。知道了？

Answer 2

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

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

一旦状态在本机反应中发生变化，平面列表就会被隐藏

Flat List gets hidden once the state gets changed in react native

react-native

react-native-flatlist