將對象從屏幕傳遞到另一個屏幕| 反應母語

Question

我想將數據： Info從屏幕WebServiceUse.js傳遞到Cellz.js 。
我不知道該怎么做，我可以傳遞一個值，但不能傳遞所有數據。
這是代碼：

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>

        );
    }
}

如何傳遞所有數據Info ？

Answer 1

您可以根據需要傳遞對象，

當前，您正在執行以下操作，僅通過item.id

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

您可以根據需要傳遞item對象，也可以通過以下方式傳遞任何其他對象

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

然后在您的Cellz.js

你可以這樣得到

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

  return (
    ...
  );
}

查看文檔以獲取更多信息。