将对象从屏幕传递到另一个屏幕| 反应母语

Question

I want to pass my data: Info from the screen WebServiceUse.js to Cellz.js .
I don't know how to do it, I can pass one value but not all the data..
Here's the code:

WebServiceUse.js:

export default class WebServiceUse extends Component {
    constructor(props) {
        super(props);
        this.state = ({
            Info: [],
            isLoading: true,
            Info1: [],
        })
    }

    componentDidMount() {
        fetch('https://*****', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ id: '1' })
        }).then((response) => response.json()).then((responseJson) => {
            this.setState({
                Info: responseJson.ed5aaf3d933385698d872d0a0d5d4f36,
                isLoading: false,
                Info1: this.Info,
            });
        }).catch((error) => {
            //console.error(error);
            alert(error);
            this.props.navigation.navigate('ScreenTwo');

        });
    }

    render() {
        return (
            <View style={styles.container}>
                {this.state.isLoading &&
                    <View>
                        <ActivityIndicator color="red" size='large' animating={this.state.isLoading} />
                    </View>
                }
                <ScrollView style={styles.welcome}>
                    {
                        this.state.Info.map((item) => {
                            return (
                                <TouchableOpacity onPress={ () => (this.props.navigation.navigate('ScreenSix', {Info: item.id}))}>
                                    <Text>{item.id}</Text>
                                    <Text>{item.date}</Text>
                                    <Text>{item.interlocuteur}</Text>
                                    <View style={styles.Separator} />
                                </TouchableOpacity>
                            )
                        })
                    }
                </ScrollView>
            </View>
        );
    }
}  

Cellz.js:

export default class Cellz extends Component {

    constructor(props) {
        super(props);}

    render() {
        return (
            <View flexDirection='column' style={styles.container}>
                <View flexDirection='row' style={styles.welcome}>
                    <Text>ID:   </Text>
                    <Text>{this.props.navigation.state.params.Info}</Text>
                </View>
                <View flexDirection='row' style={styles.welcome}>
                    <Text>Ticket ID:    </Text>
                    <Text>{this.props.navigation.state.params.Info}</Text>
                </View>
            </View>

        );
    }
}

What should I do to pass all the Data Info ?

Answer 1

You can pass the object if you want to,

Currently you are doing the following, which only passes the item.id

<TouchableOpacity onPress={ () => (this.props.navigation.navigate('ScreenSix', {Info: item.id}))}>

You can pass the item object if you wanted, or any other object in the following way

<TouchableOpacity onPress={ () => (this.props.navigation.navigate('ScreenSix', {Info: item.id, item: item}))}>

Then in your Cellz.js

You could get it like this

render() {
  const item = this.props.navigation.getParam('item');

  return (
    ...
  );
}

Check out the documentation for more about it.