Переменная не найдена

Question

Я учу react native, используя expo-cli. Я работаю над небольшим упражнением для отображения информации о фильмах после извлечения их из API с помощью axios http client. Но когда я пытаюсь передать данные из родительского компонента MoviesList в дочерний компонент MovieDetails, я получаю следующий экран:

Вот мой код компонента приложения:

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

Вы используете функциональный компонент для MovieDetails следующим образом:

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

Но фактическая реализация для него выглядит следующим образом:

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

Я надеюсь, что это поможет вам.

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

Функциональные компоненты передают props в качестве аргумента.

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

К этому:

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

Answer 4

const MovieDetails = () =>{

должно быть

const MovieDetails = props => {

Компонент является функцией, а props является ее аргументом.

Answer 5

В вашем коде отсутствуют реквизиты в MovieDetails, поэтому оно должно быть

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

Пожалуйста, дайте мне знать, если у вас все еще есть проблема