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

Question

我正在构建一个与JSON数据一起使用的React Native应用程序，并显示即将上映的电影。它看起来像这样：https://image.ibb.co/kuOt9m/app.png。我的问题是每当我点击摘要按钮我得到所有电影的所有摘要。我想要的是获得我点击的电影的具体摘要。在JSON中有一个完全独特的电影ID，我想我应该在Button或CardSection本身上设置它。我的代码看起来像这样：

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;

然后使用Router类（react-native-router-flux库）我使用Router / Scene连接两个屏幕。我要发布CardSection.js或Button.js代码，如果它会让它变得清晰，我需要添加一个ID。

编辑：添加更多信息

我的CardSection.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场景。您可以通过从SummaryDetail调用Actions.summaryDetail()导航到您的react-native-router-flux场景，但您实际上想要告诉这个场景它正在处理哪部电影。将电影（你作为MovieListItem的支柱已经拥有）作为一个参数传递，通过Actions.summaryDetail(...)这样的参数：

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

现在，您应该在SummaryDetail屏幕上将电影作为movie道具。

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

您可能希望稍后将SummaryDetail的部分拆分为单独的表示组件，并且您可能希望将其转换为类并使用componentDidMount来获取一些您尚未拥有的额外电影细节。但这应该足以让你在第二个屏幕上开始播放一部电影。