找不到道具变量

Question

我正在使用 expo-cli 学习 react native。我正在做一个小练习，在使用 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 MovieDetails = () =>{

必须

const MovieDetails = props => {

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

Answer 3

转换

   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 4

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

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

但实际实现如下：

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

希望对你有所帮助

找不到道具变量

Props variable is not found

reactjs

react-native

expo

react-props