Question

我正在制作带有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之后，它将使用数据更新状态（loading = false）。然后TVPresenter.js显示数据。

但是，我收到了以下消息：

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

所以我认为传球道具无法正常工作。

此外，由于TVContainer.js中ComponentDidMount中的console.log无法正常工作，我想知道ComponentDidMount也能正常工作。

非常感谢你们！

Answer 1

尝试更改组件：

  <TVPresenter
                loading={loading}
                airingToday={this.state.airingToday}
                topRated={this.state.topRated}
                popular={this.state.popular}
            />

Answer 2

快速浏览您的代码，我注意到了一件奇怪的事情：

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

在您的这段代码中，没有为出口指定名称。为什么会这样？

反应本机组件获取道具未定义

2 个答案: