一旦状态在React Native中更改后,平面列表就会隐藏



我在每个项目中都有一个带有复选框的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时,将更新分支数组。知道了?

相关内容

  • 没有找到相关文章

最新更新