React native 我有一个复选框列表，如何获取它们的状态

如果我在React Native中有一个列表，并且每个列表项都有一个复选框，那么如何获取所有这些复选框的状态

现在我正在用这个

{
  this.props.data.allLogs.map((r) => {
    return (
      <ListItem
        key={r.id}
        title={r.logDate}
        onPress={() => this.toggle(r.id)}
        subtitle={
          <CheckBox
            title={`start: ${r.startedAtOdometerReading} -> end: ${r.endedAtOdometerReading}`}
            checked={this.state.checkboxes[r.id]}
            onPress={() => this.toggle(r.id)}
            onIconPress={() => this.toggle(r.id)}
          />
        }
      />
    );
  })
}




toggle(id) {
    let checkboxes = this.state.checkboxes;
    checkboxes[id] = !this.state.checkboxes[id];
    this.setState({checkboxes});
  }

{
this.props.data.allLogs.map（（r）=>{
返回(
this.toggle（r.id）}
副标题={
结束：${r.endedAtOdometerReading}`}
checked={this.state.checkbox[r.id]}
onPress={（）=>this.toggle（r.id）}
onIconPress={（）=>this.toggle（r.id）}
/>
}
/>
);
})
}
切换（id）{
让checkboxes=this.state.checkboxes；
复选框[id]=！this.state.checkbox[id]；
this.setState（{checkbox}）；
}

---

它可以正常工作（复选框可以毫无问题地打开和关闭），但当我注销this.state.checkbox时，我得到一个空数组…

我想你得到一个空数组的原因是因为列表已卸载，并且其状态已清除。

首先，请确保不要直接更改状态，因为这在React中是一种不好的做法，您应该将

切换功能更改为此

toggle(id) {
    this.setState({checkboxes: {...this.state.checkboxes, [id]: !this.state.checkboxes[id]}});
}

现在来回答你的问题——没有剩下的代码很难判断，但是你可以像这样重构它

class CheckboxesList extends React.Component {

    //...

    renderListElements = () => {
        const { checkboxes } = this.state
        this.props.data.allLogs.map((r) => {
            return (
                <CheckboxListItem
                    key={r.id}
                    toggle={this.toggle}
                    checked={checkboxes[r.id]}
                    r={r} />
            );
        })
    }

    toggle = (id, checked) => {
        this.setState({ checkboxes: { ...this.state.checkboxes, [id]: checked } })
    }
}

类checkbox列表扩展了React.Component{
//...
渲染元素=（）=>{
const{checkbox}=this.state
this.props.data.allLogs.map（（r）=>{
返回(
);
})
}
切换=（id，选中）=>{
this.setState（{复选框：{…this.state.checkbox，[id]：checked}）
}
}

和您的列表项

class CheckboxListItem extends React.Component {

    //...

    state = {
        checked: false
    }

    componentDidMount() {
        const { checked } = this.props
        this.setState({ checked })
    }

    onToggle = () => {
        const { r } = this.props
        const newChecked = !this.state.checked
        this.setState({ checked: newChecked }, () => {
            this.props.toggle(r.id, newChecked)
        })
    }

    render() {
        const { r } = this.props
        const { checked } = this.state
        return (
            <ListItem
                title={r.logDate}
                onPress={this.onToggle}
                subtitle={
                    <CheckBox
                        title={`start: ${r.startedAtOdometerReading} -> end: ${r.endedAtOdometerReading}`}
                        checked={checked}
                        onPress={this.onToggle}
                        onIconPress={this.onToggle}
                    />
                }
            />
        )
    }
}

类CheckboxListItem扩展了React.Component{
//...
状态={
勾选：假
}
componentDidMount（）{
const{checked}=this.props
this.setState（{checked}）
}
onToggle=（）=>{
const{r}=this.props
const newChecked=！this.state.checked
this.setState（{checked:newChecked}，（）=>{
此.props.toggle（r.id，newChecked）
})
}
render（）{
const{r}=this.props
const{checked}=this.state
返回(
}
/>
)
}
}

请确保您也重构复选框，以便在其状态下使用
checked
prop，以便在
checked
更改时更新它
我将其更改为字符串数组，现在一切正常。这个解决方案也能更好地工作，因为我可以设置一个按钮来“检查”列表中的所有项目，或者通过将所有ID添加到数组或全部删除来“删除”所有项目

{
  this.props.data.allLogs.map((r) => (
      <ListItem
        key={r.id}
        title={`${getReadableDate(r.logDate, true)}`}
        subtitle={
          <CheckBox
            title={`start: ${r.startedAtOdometerReading} -> end: ${r.endedAtOdometerReading}`}
            checked={this.state.checkboxes && this.state.checkboxes.includes(r.id)}
            onPress={() => this.toggle(r.id)}
            onIconPress={() => this.toggle(r.id)}
          />
        }
      />
  ))
}

  toggle(id) {
    let checkboxes = this.state.checkboxes;
    if(checkboxes && checkboxes.includes(id)){
      const index = checkboxes.indexOf(id);
      checkboxes.splice(index, 1);
    } else {
      checkboxes = checkboxes.concat(id);
    }
    this.setState({checkboxes});

  }

{
this.props.data.allLogs.map（（r）=>(
this.toggle（r.id）}
onIconPress={（）=>this.toggle（r.id）}
/>
}
/>
))
}
切换（id）{
让checkboxes=this.state.checkboxes；
if（复选框和复选框。包括（id））{
const index=复选框。indexOf（id）；
复选框。拼接（索引，1）；
}否则{
复选框=复选框。concat（id）；
}
this.setState（{checkbox}）；
}
如果没有关于设置的更多信息，很难提供更多指导，但您可能需要将复选框状态存储在组件外部，否则注销时组件将卸载，状态将丢失谢谢。我将在下面发布我最终使用的解决方案。我不知道为什么这个状态没有持续下去，也许你的答案会修正它，但我没有尝试。列表没有被卸载