javascript - React 本机组件获取未定义的道具

问题描述

我正在制作一个带有 react-native 和 expo 的电影应用程序。在我的组件中，TVContainer.js 将道具传递给 TVPresenter.js，TVPresenter.js 在应用程序中显示数据。

但是，传递给 TVPresenter.js 的道具是“未定义的”，如下所示：

警告：失败的道具类型：道具loading在中标记为必填TVPresenter，但其值为undefined。

我尝试删除 .expo 文件夹并再次重新启动，它显示相同的错误。

这是 TVContainer.js


//TVContainer.js
import React from "react";
import { tv } from "../../api";
import TVPresenter from "./TVPresenter";


export default class extends React.Component {
    state = {
        loading: true,
        popular: null,
        topRated: null,
        airingToday: null
    };

    logFunction = () => {
        console.log('TVContainer시발');
    };

    async componentDidMount() {
        let popular, topRated, airingToday, error;
        console.log('componentDidMount');
        this.logFunction();
        try {
            ({
                data: { results: popular }
            } = await tv.getPopular());
            ({
                data: { results: topRated }
            } = await tv.getTopRated());
            ({
                data: { results: airingToday }
            } = await tv.getAiringToday());
            console.log('ComponentDidMount try중..')
        } catch (error) {
            console.log(error);
            error = "Can't get TV";
        } finally {
            this.setState({
                loading: false,
                error,
                popular,
                topRated,
                airingToday
            });
            this.logFunction();
        }
    }

    render() {
        const { loading, popular, topRated, airingToday } = this.state;
        console.log('!!!!!!');
        return (
            <TVPresenter
                loading={true}
                airingToday={this.state.airingToday}
                topRated={this.state.topRated}
                popular={this.state.popular}
            />
        );
    }
}

TVPresenter.js

import React from "react";
import styled from "styled-components";
import PropTypes from "prop-types";
import Loader from "../../components/Loader";
import MovieItem from "../../components/MovieItem";
import Section from "../../components/Section";
import { BG_COLOR } from "../../constants/Colors";

const Container = styled.ScrollView`
  background-color: ${BG_COLOR};
`;

const TVPresenter = ({ loading, popular, airingThisWeek, airingToday }) =>
    (loading ? (
        <Loader />
    ) : (
        <Container>
            {airingToday ? (
                <Section title="Airing Today">
                    {airingToday
                        .filter(tv => tv.poster_path !== null)
                        .map(tv => (
                            <MovieItem
                                isMovie={false}
                                key={tv.id}
                                id={tv.id}
                                posterPhoto={tv.poster_path}
                                title={tv.name}
                                voteAvg={tv.vote_average}
                            />
                        ))}
                </Section>
            ) : null}
            {airingThisWeek ? (
                <Section title="Airing this Week">
                    {airingThisWeek
                        .filter(tv => tv.poster_path !== null)
                        .map(tv => (
                            <MovieItem
                                isMovie={false}
                                key={tv.id}
                                id={tv.id}
                                posterPhoto={tv.poster_path}
                                title={tv.name}
                                voteAvg={tv.vote_average}
                            />
                        ))}
                </Section>
            ) : null}
            {popular ? (
                <Section title="Popular" horizontal={false}>
                    {popular
                        .filter(tv => tv.poster_path !== null)
                        .map(tv => (
                            <MovieItem
                                isMovie={false}
                                horizontal={true}
                                key={tv.id}
                                id={tv.id}
                                overview={tv.overview}
                                posterPhoto={tv.poster_path}
                                title={tv.name}
                                voteAvg={tv.vote_average}
                            />
                        ))}
                </Section>
            ) : null}
        </Container>
    )
    );

TVPresenter.propTypes = {
    loading: PropTypes.bool.isRequired,
    popular: PropTypes.array,
    airingThisWeek: PropTypes.array,
    airingToday: PropTypes.array
};

export default TVPresenter;

如果运行良好：

起初，加载是真的。所以 TVPresenter 显示了 Loader。在 TVContainer.js 中的 componentDidMount 之后，它使用 data(loading = false) 更新状态。TVPresenter.js 显示数据。

但是，我收到了这条消息：

警告：失败的道具类型：道具loading在中标记为必填TVPresenter，但其值为undefined。

所以我认为传递道具不能正常工作。

另外，由于 TVContainer.js 中的 ComponentDidMount 中的 console.log 不起作用，我想知道 ComponentDidMount 也可以正常工作。

十分感谢大家！！

标签： javascriptreactjsreact-native

javascript - React 本机组件获取未定义的道具

问题描述

解决方案

推荐阅读