找不到道具变量

Question

我正在使用react native学习expo-cli。在使用axios http client从API提取电影信息之后，我正在做一些小练习来显示有关电影的信息。但是，当我尝试将数据从父组件MoviesList传递到子组件MovieDetails时，会看到以下屏幕：

这是我的App组件代码：

import { View } from 'react-native';
import React, { Component } from 'react';
import Header from './src/components/Header';
import MoviesList from './src/components/MoviesList';
import axios from 'axios';

    const API_KEY = "mykey";

    class App extends Component {
      constructor(props) {
        super(props);
        this.state = { 
          movies:[],
          movieToSearch:"avengers"
         };
      }

      componentDidMount=async()=>{
          const res = await axios.get(`http://www.omdbapi.com/?s=${this.state.movieToSearch}&apikey=${API_KEY}`);
          // const data=await res.json();
          this.setState({ movies:res.data.Search });
      }

      render() {
        return (
          <View style={ { flex:1 } }>
            <Header title={"Films"} />
            <MoviesList movies={ this.state.movies } />
          </View>
        );
      }
    }

    export default App;

MoviesList.js的代码：

import React,{ Component } from 'react';
import { View } from 'react-native';
import MovieDetails from './MovieDetails';

class MoviesList extends Component{
    renderMovies(){
        const { movies } = this.props;
        if(movies){
            return movies.map(movie => {
                return <MovieDetails key={ movie.imdbID } movie = { movie } />
            });
        }else{
            return;
        }
    }

    render(){
        return (
            <View>
                { this.renderMovies() }
            </View>
        )
    }
}

export default MoviesList;

MovieDetails.js的代码：

import React from 'react';
import { View, Text } from 'react-native';
import Card from './Card';
import CardSection from './CardSection';
import Button from './Button';

const MovieDetails = () =>{
    const { Title, Year, Poster } = props.movie;
    return (
        <Card>
            <CardSection>
                <Text>{ Title }</Text>
            </CardSection>

            <CardSection>
                <Text>{ Title }</Text>
            </CardSection>

            <CardSection>
                <Button btnLabel="Voir les details" />
            </CardSection>
        </Card>
    )
}

export default MovieDetails;

我的代码中的所有内容看起来都很不错，而且我也不知道错误是从哪里来的。

这是github仓库，因此您可以在本地进行测试：https://github.com/jochri3/movieslist

Answer 1

功能组件将props作为参数传递。

const MovieDetails = () =>{
    const { Title, Year, Poster } = props.movie;
    return (
        <Card>
...

对此：

const MovieDetails = (props) =>{
    const { Title, Year, Poster } = props.movie;
    return (
        <Card>
...

Answer 2

转换

   const { Title, Year, Poster } = props.movie;
    return (
        <Card>
            <CardSection>
                <Text>{ Title }</Text>
            </CardSection>

            <CardSection>
                <Text>{ Title }</Text>
            </CardSection>

            <CardSection>
                <Button btnLabel="Voir les details" />
            </CardSection>
        </Card>
    )
}

到

const MovieDetails = ({movie}) => ({
     <Card>
        <CardSection>
           <Text>{ movie.Title }</Text>
        </CardSection>
        ...      
     </Card>   
    })

和

class MoviesList extends Component{
    renderMovies(){
        const { movies } = this.props;
        if(movies){
            return movies.map(movie => {
                return <MovieDetails key={ movie.imdbID } movie = { movie } />
            });
        }else{
            return;
        }
    }

    render(){
        return (
            <View>
                { this.renderMovies() }
            </View>
        )
    }
}

使用

class MoviesList extends Component{
    constructor(props){
       super(props)
     }
    renderMovies = () => {
        const { movies } = this.props;

            return movies.map(movie => {
                return <MovieDetails key={ movie.imdbID } movie = { movie } />
            });

    }

    render(){
        return (
            <View>
                { this.renderMovies() }
            </View>
        )
    }
}

Answer 3

您正在使用MovieDetails的功能组件，如下所示：

const MovieDetails = () => { const { Title, Year, Poster } = props.movie; ....... }

但是它的实际实现如下：

const MovieDetails = (props) => { const { Title, Year, Poster } = props.movie; ...... }

希望对您有帮助。

Answer 4

您的代码在MovieDetails中缺少道具，因此应该是

const MovieDetails = (props) =>{
    const { Title, Year, Poster} = props; // this should be props only not props.movies

如果您仍有问题，请告诉我

Answer 5

const MovieDetails = () =>{

必须是

const MovieDetails = props => {

该组件是一个函数，props是其参数。