单击按钮后获取特定 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;

然后在另一个 class 中我显示这样的数据：

import React from 'react';
import { View, Text } from 'react-native';

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

export default MovieSummary;

然后使用路由器 class（react-native-router-flux 库）我使用 Router/Scene 连接两个屏幕。我要 post 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 场景。您可以通过从 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 道具。

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

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

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

Getting specific JSON data after clicking a button

javascript

json

react-native

react-native-router-flux