React Native - 如何将数组映射数据传递到其他屏幕答案

【问题标题】：React Native - how to pass array map data to other screenReact Native - 如何将数组映射数据传递到其他屏幕
【发布时间】：2019-01-23 15:19:14
【问题描述】：

美好的一天！我制作了一个数组映射来显示来自我的 API 的特定数据，并且我成功地做到了。但我的下一个任务是将这些数据从 API 传递到其他屏幕。

现在，我的问题是这些数据是使用 ARRAY MAP 显示的，而我不知道如何将我的数据传递到其他屏幕。

-- 我尝试使用导航导航，但它只传递 1 个数据，我需要传递我显示的所有数据。

这是我的代码

export default class Category extends Component {
    constructor(props){
        super(props)
        this.state = {
            ....
            CHECKED_Data: [],
        };
    }

    fetch_CHECKED_Data = async () => {
        const response = await fetch("http://192.168.254.***:****/checked/get_All_Cheked/" + this.state.Checked_ORDER_NO );
        const json = await response.json();
        this.setState({ CHECKED_Data: json });
    }
    componentDidMount() {
        this.fetch_CHECKED_Data();
    }

    For_table_No() {
        return this.state.CHECKED_Data.map((data) => {
            return (
                <View>
                    <View key={key}>
                        <Text>Merged Table: { data.Checked }</Text>
                    </View>
                </View>
            )
        })
    }

paxFunc(item) {
    if( pax_no > this.state.ForSum_Checked_Capacity ) {
        this.setState({
            MERGE_modal: true
        });
    } else{
        return this.state.CHECKED_Data.map((data) => {
                var Take = this.state.TakeOut;
                if(Take == this.state.TakeOut) {
                    this.props.navigation.navigate('Dishes', {
                        .....
                        check                   : this.state.check,
                        Checked_ORDER_NO        : this.state.Checked_ORDER_NO,
                        CHECKED                 : data.Checked
                    });
                }
        });
    }
}

render() {
     return(
          .....
               <View>
                    { this.For_table_No() }
               </View>
          ......
     )
}

第一个屏幕：

第二屏：

【问题讨论】：

标签： javascript android reactjs react-native mobile

【解决方案1】：

    this.props.navigation.navigate('Dishes',this.state.CHECKED_Data)

然后像您在此处所做的那样映射该屏幕中的数据

【讨论】：

【解决方案2】：

-> 通过将参数作为第二个参数放入对象中，将参数传递给路由。

this.props.navigation.navigate('Dishes',{dataToRender: this.state.CHECKED_Data});

-> 在下一页你可以访问数据

this.props.navigation.state.params.dataToRender;

-> 之后在下一页您可以设置状态并执行所需的操作。

【讨论】：

【解决方案3】：

看了我的代码半个小时，我发现错误的原因——或者说它不通过的原因是因为一个“关键”。

我忘记在我的其他页面中声明一个键，这就是我的数据没有显示的原因。

【讨论】：