如果组件包含图像元素，则会出现类型错误

Question

项目

我有一个项目（React、Typescript、React useContext）调用 api 来获取有关系列剧集的信息，然后将信息显示为卡片。

现状

上次我运行这个项目，它成功了，我将它部署到 Heroku，它成功了。一个月后，在没有任何更改后，它在我的本地或 heroku 上都不起作用，他们抛出相同的错误。

错误：

Uncaught TypeError: 无法读取属性 'medium' of null 在 EpisodesList.tsx:21

EpisodesList.tsx:21 未捕获（承诺）类型错误：无法读取 null 的属性 'medium' 在 EpisodesList.tsx:21

剧集列表组件

const EpisodesList = (props: any): JSX.Element => {
    const { episodes, toggleFavAction, favourites, store } = props;
    const { state, dispatch } = store;

    return episodes.map((episode: Episode) => {
        return (
            <div key={episode.id} className="episode-box">
                <section>
                    <img
                        src={episode.image.medium}
                    />
                    <div>{episode.name}</div>
                    <div>
                        Season: {episode.season} Number: {episode.number}
                    </div>
                </section>
            </div>
        );
    });
};

export default EpisodesList;

使用该组件的首页

const Home = () => {
    const { state, dispatch } = React.useContext(Store);

    useEffect(() => {
        state.episodes.length === 0 && fetchDataAction(dispatch);
    });

    const props: EpisodeProps = {
        episodes: state.episodes,
        store: { state, dispatch },
        toggleFavAction,
        favourites: state.favourites,
    };

    return (
        <section className="episode-layout">
            {console.log("props in home return is:", props)}
            <EpisodesList {...props} />
        </section>
    );
};

控制台日志+我试过的

可能问题与此有关 --> return 部分中的 console.log 显示：

家里的道具 return 是：{episodes: Array(0), store: {...}}

家里的道具 return 是：{episodes: Array(42), store: {...}}

奇怪的是，如果我从 Episodelist 组件中删除图像元素，它可以正常工作，所有数据都在那里（我可以在 console.log 中看到它，甚至 image.medium).

为什么我突然收到这些错误以及如何重新插入我的图像元素有什么想法吗？

Answer 1

您所要做的就是对图像使用条件渲染。

或

发生这种情况是因为在初始渲染时，“剧集”的“图像”属性为空，而您正试图像“episode.null.medium”那样访问它，因此您需要添加一个条件仅当“episode.image”不为空时才会尝试访问“中等”属性。

如果组件包含图像元素，则会出现类型错误

Component gives type error if it includes image element

image

typescript

reactjs

tsx