单击按钮后获取特定的JSON数据

Question

我正在构建一个可与JSON数据一起使用并显示即将上映的电影的React Native应用程序。看起来像这样：https：//image.ibb.co/kuot9m/app.png。我的问题是，每当我单击"摘要"按钮时，我会收到所有电影的所有摘要。我想要的是获取我点击的电影的特定摘要。在JSON中，有一个完全独特的电影ID，我想我应该将其设置在按钮或卡片本身上。我的代码看起来像这样：

import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import axios from 'axios';
import MovieSummary from './MovieSummary';
class SummaryList extends Component {
  state = { movies: [] };
  componentDidMount() {
    axios.get('https://api.themoviedb.org/3/movie/upcoming?api_key=22d8da68cffba151bfa886d5003aac02&language=en-US&page=1')
      .then(response => this.setState({ movies: response.data.results }));
  }
  renderSummary() {
    return this.state.movies.map(movie =>
      <MovieSummary key={movie.id} movie={movie} />
    );
  }
  render() {
    console.log(this.state);
    return (
      <ScrollView>
        {this.renderSummary()}
      </ScrollView>
    );
  }
}
export default SummaryList;

然后在另一堂课中显示这样的数据：

import React from 'react';
import { View, Text } from 'react-native';
const MovieSummary = (props) => (
  <View>
    <Text>
      {props.movie.overview}
    </Text>
  </View>
);
export default MovieSummary;

，然后使用路由器类（React-Native-nive-router-flux库），我使用路由器/场景连接两个屏幕。我要发布cardection.js或button.js代码，如果要再清楚，我需要添加ID。

编辑：添加更多信息

我的cardection.js看起来像这样：

import React from 'react';
import { View } from 'react-native';
const CardSection = (props) => (
    <View style={styles.containerStyle}>
      {props.children}
    </View>
  );
const styles = {
  containerStyle: {
    *some view styles*
  }
};
export default CardSection;

我的button.js看起来像这样：

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
const Button = ({ onPress, children }) => (
    <TouchableOpacity
      onPress={onPress}
      style={styles.buttonStyle}
    >
      <Text style={styles.textStyle}>
        {children}
      </Text>
    </TouchableOpacity>
  );
const styles = {
  buttonStyle: {
    *button styles*
  },
  textStyle: {
    *text styles*
  }
};
export default Button;

Answer 1

第一件事，我认为您的第二个屏幕有些混乱，您将其称为SummaryList，并且正在从事一系列电影 - 而如果我理解正确，您希望您的第二个屏幕要处理一部电影。

我会重命名一些：

• MoviesList是
• MovieDetail-> MoviesListItem（这些是您的MovieList中的行，重命名以避免与您的第二个屏幕混淆）
• SummaryDetail很好（这将是您的单电影场景。我可能实际上称此MovieDetail，但这会令人困惑！）

忘记SummaryList-我们不需要它。您只有一个我们担心的列表，那就是MoviesList。

首先，修改您的Router，以便您有一个MoviesList和SummaryDetail场景：

// Router.js
// ...
const RouterComponent = () => (
  <Router
    navigationBarStyle={styles.viewStyle}
    titleStyle={styles.textStyle}
    sceneStyle={{ paddingTop: 53 }}
  >
    <Scene key="upcoming" component={MoviesList} title="Upcoming Movies" />
    <Scene
      key="summaryDetail"
      component={SummaryDetail}
      title="Summary Detail"
      leftButtonIconStyle={{ tintColor: '#a52a2a' }}
    />
  </Router>
);
// ...

因此，现在您的MoviesListItem是其中包含摘要Button的组件。这需要导致您的SummaryDetail场景。您可以通过react-native-router-flux调用Actions.summaryDetail()来导航到SummaryDetail场景，但实际上您想告诉这个场景它正在处理哪个电影。将电影（您已经作为MovieListItem的道具）传递为参数，通过对Actions.summaryDetail(...)的参数：

// MovieListItem.js
// ...
    <View style={{ justifyContent: 'flex-end' }}>
      <Button
        onPress={() => {
        Actions.summaryDetail({ movie: props.movie });  // <- Important bit!
      }}>
        Summary
      </Button>
    </View>
// ...

现在，您应该在SummaryDetail屏幕上使用电影作为movie Prop。

// SummaryDetail.js
// ...
const SummaryDetail = (props) => (
  <View>
    <Text>
      {props.movie.overview}
    </Text>
  </View>
);
// ...

您可能希望将SummaryDetail的部分分成单独的呈现组件，并且您可能需要将其转变为类，并使用componentDidMount来获取一些您尚未拥有的额外的电影细节。但这应该足以让您从第二屏上开始一部电影。