Question

我已经使用此API一周并处理数据了： https://api.themoviedb.org/3/discover/movie?api_key=9a4a662a126525b07d4b84b079d809d8&language=en-US&sort_by=popularity.asc&include_adult=false&include_video=false&page=1

每个数据都有一个id，例如，如果您检查该JSON文件，例如从我的平面列表中显示的标题电影，例如“ How to Train Your Dragon：The Hidden World”，而该电影的ID为166428，以显示所有数据电影成为列表，它是否起作用，就像移动应用程序中的常规电影列表一样，但是我不知道如何获取详细数据并对其进行操作，如果我触摸详细信息按钮，则会出现错误，导航或其他错误。我该如何解决？

代码在这里：

MovieList.js

// create constructor
    constructor(props){
        super(props);

        // default statement
        this.state = {
            loading : false,
            data : [],
            // depends on API
            // using API TmDB API
            api_version : 3,
            api_key : '9a4a662a126525b07d4b84b079d809d8',
            language : 'en-US',
            // optional param
            sort_by : 'popularity.desc',
            include_adult_movie : false,
            include_video : false,
            page : 1,
            //
            error : null,
            refreshing : false
        };

    }

    // call the API function
    componentDidMount = () => {
        this.makeRemoteRequest();
    }
    // call the api url and manipulate it
    makeRemoteRequest = () => {
        const {
            api_version,
            api_key,
            language,
            sort_by,
            include_adult_movie,
            include_video,
            page
        } = this.state
        const url = `https://api.themoviedb.org/${api_version}/discover/movie?api_key=${api_key}&language=${language}&sort_by=${sort_by}&include_adult=${include_adult_movie}&include_video=${include_video}&page=${page}`;
        this.setState({ loading : true })
        fetch(url)
        .then(response => response.json())
        .then(response => {
            this.setState({
                data: [...this.state.data, ...response.results],
                error: response.error || null,
                loading: false,
                // refreshing: false
            });
        })
        .catch(error => {
            this.setState({ error, loading: false});
        });
    }

    // infinite scroll
    handleLoadMore = () => {
        this.setState({
            page: this.state.page + 1,
            loading: true
        }, () => {
            this.makeRemoteRequest();
        });
    }

    // render forward to detail item
    // handleItemTouch = ({ item }) => {
    //  this.setState({
    //      movie_id: this.state.movie_id + item.id,
    //      loading: true
    //  }, () => {
    //      this.props.navigation.navigate("MovieListData_Detail", movie_id);
    //  });
    // }

    // render movie item
    renderItem = ({ item }) => {
        return (
            // touchable item
                <ListItem 
                    Thumbnail
                    // onPress={() => this.handleItemTouch}
                    onPress={() => this.navigation.navigate("MovieListData_Detail", item.id)}
                >
                        <Left>
                            <Thumbnail style = {{ height: 120, borderRadius: 30/2}} square large source= {{ uri:"https://image.tmdb.org/t/p/w185" + item.poster_path }}/>
                                <Body>
                                    <Text style = { stylesWindow.fontMainColor } >{ item.title }</Text>
                                    <Text style = { stylesWindow.fontMainColor } note >Release Date : { item.release_date }</Text>
                                    <Text style = { stylesWindow.fontMainColor } note >Vote Avarage : { item.vote_average }</Text>
                                    <Text style = { stylesWindow.fontMainColor } note >Language : { item.original_language}</Text>
                                </Body>
                        </Left>
                            <Icon name="arrow-forward" style={ stylesWindow.iconColor }/>
                </ListItem>
        );
    }

MovieDetail.js

 // create constructor
    constructor(props){
        super(props);

        // default statement
        this.state = {
            loading : false,
            data : [],
            // depends on API
            // using API TmDB API
            api_version : 3,
            api_key : '9a4a662a126525b07d4b84b079d809d8',
            language : 'en-US',
            // optional param
            movie_id : null,
            //
            error : null,
            refreshing : false
        };
    }

    // call the API function
    componentDidMount = () => {
        this.makeRemoteRequest();
    }
    // call the api url and manipulate it
    makeRemoteRequest = () => {
        const {
            api_version,
            api_key,
            movie_id,
            language
        } = this.state
        const url = `https://api.themoviedb.org/${api_version}/movie/${movie_id}?api_key=${api_key}&language=${language}`;
        this.setState({ loading : true })
        fetch(url)
        .then(response => response.json())
        .then(response => {
            this.setState({
                data: [...this.state.data, ...response.results],
                error: response.error || null,
                loading: false,
                // refreshing: false
            });
        })
        .catch(error => {
            this.setState({ error, loading: false});
        });
    }

    handleDetailData = ({ item }) => {
        this.setState({
            movie_id: this.state.movie_id + item.id,
            loading: true
        }, () => {
            this.makeRemoteRequest();
        });
    }

    // render movie item
    renderItem = ({ item }) => {
        return (
            // touchable item
            <Text>{ item.title }</Text>
        );
    }


    render(){
        // const item = this.props.navigation.state.params;
        return(
            <Container>
                <Header
                    style = { stylesWindow.headerBackgroundColor }
                    androidStatusBarColor="#504F6D"
                    iosBarStyle="light-content"
                >
                    <Left>
                        <Button transparent>
                            <Icon name="menu" style={ stylesWindow.iconColor }/>
                        </Button>
                    </Left>
                        <Body>
                            {/* <Title>{ item.title }</Title>
                            <Subtitle>{ item.release_date }</Subtitle> */}
                        </Body>
                    <Right />
                </Header>
                    <Content style = {stylesWindow.ContentStyleColor}>
                        <FlatList 
                            data = { this.state.data }
                            // render per item
                            renderItem = { this.renderItem }
                            // key list
                            keyExtractor={ this.handleDetailData }
                        />
                    </Content>
            </Container>
        );
    }
}

当我看到您的代码专家并在不同的地方询问后，我的代码就这样

MovieList.js

    renderItem = ({ item }) => {
        return (
            // touchable item
                <ListItem 
                    Thumbnail
                    onPress={() => this.props.navigation.navigate("MovieListData_Detail", {id: item.id})}

和MovieDetail.js

constructor(props){
        super(props);

        // default statement
        this.state = {
            loading : false,
            data : [],
            // depends on API
            // using API TmDB API
            api_version : 3,
            api_key : '9a4a662a126525b07d4b84b079d809d8',
            language : 'en-US',
            // optional param
            movie_id : null,
            //
            error : null,
            refreshing : false
        };
    }

    // // call the API function
    // componentDidMount = () => {
    //  this.makeRemoteRequest();
    // }

    componentDidMount = () => {
        const item = this.props.navigation.state.params;
        // console.log(item);
        this.setState({
            movie_id : item.id
        }, () => {
            this.makeRemoteRequest();
        })
    }

，然后操作render（）

  <Content style = {stylesWindow.ContentStyleColor}>
                        <Text style = { stylesWindow.fontMainColor } >{ item.title }</Text>
                    </Content>

肯定会再次显示错误，找不到变量项。

Answer 1

您需要传递整个项目，以便您可以调用标题，release_date等其他项目。传递{id:item.id}仅会传递id本身。

MovieList.js

<ListItemThumbnail
      onPress={() => this.props.navigation.navigate("MovieListData_Detail", {item: item})}>

        .....

</ListItemThumbnail>

MovieDetail.js

<Content style = {stylesWindow.ContentStyleColor}>
     <FlatList 
       data = {this.props.navigation.state.params.item}
       renderItem ={({item}) => 
           <Text>{item.title}</Text>
          }
      />
   </Content>

Answer 2

以这种方式传递整个item

onPress={() => this.navigation.navigate("MovieListData_Detail", {item})}

然后在MovieDetail

const {item} = this.props.navigation.state.params;
// then try to read the whole item, for example
console.log(item, item.title);

如何使用带有本地触发器onPress（）的触发器的react-navigation从FlatList react-native获取详细数据？

2 个答案: