我正在制作一个本机反应应用并使用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)
答案 0 :(得分: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