React Native - 无法将 CheckBox 值传递到另一个屏幕答案

【问题标题】：React Native - Unable to pass CheckBox value to another screenReact Native - 无法将 CheckBox 值传递到另一个屏幕
【发布时间】：2019-01-10 23:13:58
【问题描述】：

我是来问你如何正确地将 CheckBox 值传递到其他屏幕？

例如，如果用户选中 CheckBox，然后进入 下一个屏幕，则 CheckBox 的值应显示在该屏幕中。

但在我的代码中，我的 console.log 给出了 false 的输出（我不明白为什么），一旦我进入下一个屏幕，状态并没有真正通过，因为它的显示是空白的。

这是我的代码

export default class tables extends Component {
constructor(props){
    super(props)
    this.state = {
        ...
        check: {},
        tbl_Merge: []
    }
}

proceed_TO_Category = () => {
    this.props.navigation.navigate('Category', {
        userName    : this.state.userName,
        DineIn      : this.state.DineIn,
        tbl         : this.state.tbl,
        tbl_2nd     : this.state.tbl_2nd,
        tbl_Merge   : this.state.tbl_Merge
    });
    console.log("CHECK ======> "+ this.state.tbl_Merge);
}

checkBox_Test = (table_NO) => {
    const tbl_Merge = this.state.tbl_Merge;
    const checkCopy = {...this.state.check}
    if (checkCopy[table_NO]) {
        checkCopy[table_NO] = false;
    } else {
        checkCopy[table_NO] = true;
    }
    this.setState({ check: checkCopy });
    this.setState({ tbl_Merge: table_NO == this.state.tbl_Merge });
}

render() {
    return(
         <View>
              ....
              <Flatlist
                    ....
                    <CheckBox
                       value = { this.state.check[item.tbl_id] }
                       onChange = {() => this.checkBox_Test(item.tbl_id) }
                    />
                    ....
              />
              ....
                    <View>
                        <TouchableOpacity
                            onPress = {() => this.proceed_TO_Category()}>
                            <Text>Categories</Text>
                        </TouchableOpacity>
                    </View>
         <View/>
    )
}
}

我的 proceed_TO_Category 中的 Console.log 屏幕截图。

【问题讨论】：

您的 Flatlist 数据是什么？特别是 tbl_id。
我的复选框被放置在我的平面列表中，我也使用 fetch 来显示我的平面列表中的一些项目——我称它们为“tbl_id”。因此，每个项目都有自己的复选框。

标签： javascript android reactjs react-native checkbox

【解决方案1】：

checkBox_Test = (table_NO) => {
    const tbl_Merge = this.state.tbl_Merge;
    const checkCopy = {...this.state.check}
    if (checkCopy[table_NO]) {
        checkCopy[table_NO] = false;
    } else {
        checkCopy[table_NO] = true;
    }
    this.setState({ check: checkCopy, tbl_Merge: table_NO == this.state.tbl_Merge }); // 1. Edit
}

编辑：我们不应该连续使用 setState。因为 setState 是异步函数。如果你想在setState过程后借助回调函数调用函数，setState(update, callback);
您将 tbl_Merge 定义为一个数组，但是当您将其设置为状态时，您将其设置为布尔值。

【讨论】：