Question

我正在制作一个本机反应应用并使用redux路由。我对这些技术还很陌生。我在页面上进行api调用并显示列表。在单击列表项时，应用程序将重定向到另一个显示详细信息的页面。如何将第一页上收到的数据传递到详细信息页面以显示内容。这是我的第一页看起来像。另外我如何在第二页上访问它

class MovieDetails extends Component {
constructor(props) {
   super(props)
   this.state = {
        results: [],
        loading: true
   }
}
_fetchData() {
   fetch("http://example.com/data.json", {
        method: "GET"
    })
   .then((response) => response.json())
   .then((responseData) => {
        console.log(responseData)
        this.setState({
                results: responseData,
                loading: false
        })
   })
   .done()
}

pushNewRoute(route) {
    this.props.pushNewRoute(route)
}

componentDidMount() {
     this._fetchData()
}

render() {


    return (

        <Container theme={theme} style={{backgroundColor: '#262626'}}>
            <Image source={require('../../../images/img.png')} style={styles.container}>
                <Header>
                    <Button transparent onPress={this.props.openDrawer} style={Platform.OS === 'android' ? headerStyles.aheaderIcon : headerStyles.iosheaderIcon} >
                        <Icon name="ios-menu" />
                    </Button>
                    <Text style={headerStyles.textHeader}>Movies</Text>
                    <Image
                      transparent
                      source={require('../../../images/Header-Logo.png')}
                      style={[headerStyles.logoHeader, Platform.OS === 'android' ? headerStyles.aheaderIcon : headerStyles.iosheaderIcon]} />
                </Header>

                <Content>


                   <View style={{backgroundColor: '#fff'}}>

                    { 
                         this.state.results.map(function(data, index) {
                             return (

                                 <TouchableOpacity 
                                    key={index}
                                    style={{flexDirection: 'row'}} 
                                    onPress={() => this.pushNewRoute('movieDetails')}>
                                        <Image source={{uri: data.thumb}} style={styles.movieImage} />
                                        <View style={styles.movieContent}>
                                            <Text numberOfLines={2} style={styles.movieHeader}>
                                                {data.headline}
                                            </Text>
                                            <View style={{flexDirection:'row', marginLeft: -20, marginTop: 25}}>
                                                <Icon name="ios-time-outline" style={ Platform.OS === 'android' ? styles.aHeadertimeIcon : styles.iosHeadertimeIcon} />
                                                <Text style={styles.moviePosterLink}>{data.date} at {data.time}</Text>
                                            </View>
                                        </View>
                                    </TouchableOpacity>
                              )
                        }, this)
                    }

                    </View> 
                </Content>
            </Image>
        </Container>
    )
}

}

function bindAction(dispatch) {
return {
    openDrawer: ()=>dispatch(openDrawer()),
    pushNewRoute:(route)=>dispatch(pushNewRoute(route))
}
}

export default connect(null, bindAction)(MovieDetails)

Answer 1

编辑：我忽略了并假设您将获取的数据存储在商店中。但那并没有发生。我建议你看一下：https://github.com/reactjs/redux/tree/master/examples/real-world

以下是您可以实现所需的步骤：

第一页 - 使用操作将您提取的数据保存在商店中。
第二页 - 将您的第二页连接到同一商店并从那里访问它。

关键是您需要将商店连接到您的React状态，以便您可以访问它们。在您的容器中，将您的商店连接到您的UI。

export default connect((state, ownProps) => ({ state: { Movies: state.Movies, ownProps }), null)(MovieDetails);

然后您可以通过这种方式将其传递给您的UI图层：

render() {
    const { state, ownProps } = this.props;
    return (<UI Movies={state.Movies} {...ownProps} />);
}

最后，您可以在UI组件中访问它：

this.props.Movies

如何使用redux将收到的数据传递到另一个页面

1 个答案: