Question

我是React的新手并尝试调试我看到的以下错误。

错误＃1：

module name {
    exports hello;
}

错误＃2：

Uncaught TypeError: props.videos.map is not a function
at new VideoList

以下是我对该文件的引用代码：

bundle.js:19956 Error: findComponentRoot(..., .0.0.0): Unable to find element.
This probably means the DOM was unexpectedly mutated (e.g., by the browser), 
usually due to forgetting a <tbody> when using tables, nesting tags like 
<form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. 
Try inspecting the child nodes of the element with React ID ``.

Index.js文件：

import React from 'react';
import VideoListItem from './video_list_item';

const VideoList = (props) => {
  const videoItems = props.videos.map((video) => {
    return <VideoListItem key={video.etag} video={video} />
  });
  return (
    <ul className ="col-md-4 list-group">
    {videoItems}
    </ul>
  );
};

export default VideoList;

我在SOF上回顾了以下问题，但两者都无法解决我的问题：

React JS - Uncaught TypeError: this.props.data.map is not a function

React.js this.props.data.map() is not a function

我很难理解为什么它会给我错误＃1，因为我正在使用带有'胖箭头'的函数声明。我假设错误＃2是错误＃1的结果。

我做错了什么？

Answer 1

尝试将videos默认状态设置为空数组[]而不是对象{}：

this.state = { videos: [] };

发生此错误是因为map()是一种数组方法，并且在对象上不可用。

Answer 2

尝试这种方法。

 const videoItems = props.videos && props.videos.map((video) => {
    return <VideoListItem key={video.etag} video={video} />
  });

也许props.video在呈现之前是未定义的。

React JS - Uncaught TypeError：props.video.map不是函数

2 个答案: