Question

美好的一天！我制作了一个数组映射来显示来自我的 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>
          ......
     )
}

第一个屏幕：

第二屏幕：

Answer 1

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

然后完全按照您在此处所做的操作在该屏幕中映射数据

Answer 2

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

this.props.navigation.navigate（'Dishes'，{dataToRender： this.state.CHECKED_Data}）;

->在下一页中，您可以按以下方式访问数据

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

->之后，可以在下一页中设置setState并执行所需的操作操作。

有关更多详细信息，您可以通过此链接

https://reactnavigation.org/docs/en/params.html

Answer 3

在阅读我的代码半小时后，我发现错误的原因-或仅仅因为它没有通过的原因是“键”。

我忘记在其他页面上声明密钥，这就是为什么我的数据不显示的原因。

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

3 个答案: