无法读取未定义的属性"map"

Question

我正在关注reactjs教程,并且在将值从一个组件的状态传递到另一个组件时,我一直遇到问题.当执行CommentList组件中的map函数时,抛出错误'无法读取属性'map'of undefined'.从CommentBox传递到CommentList时会导致prop变为undefined的原因是什么？

  var CommentList = React.createClass({
    render: function() {
      var commentNodes = this.props.data.map(function (comment){
        return (
          <div>
            <h1>{comment.author} </h1>
          </div>
        );
      });
      return (
        <div className="commentList">
          {commentNodes}
        </div>
      );
    }
  });

  var CommentBox = React.createClass({
    getInitialState: function(){
      return {data: []};
    },
    getComments: function(){
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data){
          this.setState({data: data});
        }.bind(this),
        error: function(xhr, status, err){
          console.error(url, status, err.toString());
        }.bind(this)
      });
    },
    componentWillMount: function(){
      this.getComments()
    },
    render: function(){
      return (
        <div className="commentBox">
          {/*this.state.data.comments*/}
          {<CommentList data={this.state.data.comments}/>}
        </div>
      );
    }
  });

  React.renderComponent(
    <CommentBox url="comments.json" />,
    document.getElementById('content')
  );

Answer 1

首先,设置更安全的初始数据:

getInitialState : function() {
    return {data: {comments:[]}};
},

并确保您的ajax数据.

如果您按照上述两个指令(例如Demo),它应该可以工作.

更新:您可以使用条件语句包装.map块.

if (this.props.data) {
  var commentNodes = this.props.data.map(function (comment){
      return (
        <div>
          <h1>{comment.author}</h1>
        </div>
      );
  });
}

Answer 2

我想你忘了改变

data={this.props.data}

至

data={this.state.data}

在CommentBox的render函数中.在我学习本教程时,我犯了同样的错误.因此整个渲染功能应该是这样的

render: function() {
  return (
    <div className="commentBox">
      <h1>Comments</h1>
      <CommentList data={this.state.data} />
      <CommentForm />
    </div>
  );
}

代替

render: function() {
  return (
    <div className="commentBox">
      <h1>Comments</h1>
      <CommentList data={this.props.data} />
      <CommentForm />
    </div>
  );

Answer 3

您需要在渲染之前放置数据

应该是这样的:

var data = [
  {author: "Pete Hunt", text: "This is one comment"},
  {author: "Jordan Walke", text: "This is *another* comment"}
];

React.render(
  <CommentBox data={data}/>,
  document.getElementById('content')
);

而不是这个:

React.render(
  <CommentBox data={data}/>,
  document.getElementById('content')
);

var data = [
  {author: "Pete Hunt", text: "This is one comment"},
  {author: "Jordan Walke", text: "This is *another* comment"}
];

Answer 4

错误"Cannot read property 'map' of undefined"，如果有在一个错误会遇到"this.props.data"或没有props.data阵列。

更好地放置条件来检查数组

if(this.props.data){
this.props.data.map(........)
.....
}

Answer 5

我考虑过在taggon对这个问题的回答下发表评论，但是，我觉得对于那些对细节感兴趣的人来说，它应该有更多的解释。

未捕获的类型错误：无法读取未定义的属性“值”严格来说是一个 JavaScript 错误。
（请注意，值可以是任何值，但对于此问题，值是“地图”）

了解这一点至关重要，这样您就可以避免无休止的调试循环。
这个错误很常见，尤其是刚开始使用 JavaScript（及其库/框架）时。
因为，这与理解组件生命周期方法React有很大关系。

// Follow this example to get the context
// Ignore any complexity, focus on how 'props' are passed down to children

import React, { useEffect } from 'react'

// Main component
const ShowList = () => {
  // Similar to componentDidMount and componentDidUpdate
  useEffect(() => {// dispatch call to fetch items, populate the redux-store})

  return <div><MyItems items={movies} /></div>
}

// other component
const MyItems = props =>
  <ul>
    {props.items.map((item, i) => <li key={i}>item</li>)}
  </ul>


/**
  The above code should work fine, except for one problem.
  When compiling <ShowList/>,
  React-DOM renders <MyItems> before useEffect (or componentDid...) is called.
  And since `items={movies}`, 'props.items' is 'undefined' at that point.
  Thus the error message 'Cannot read property map of undefined'
 */

作为解决这个问题的一种方法，@taggon 给出了一个解决方案（请参阅第一个答案或链接）。

解决方案：设置初始/默认值。
在我们的示例中，我们可以通过声明空数组的值来避免items“未定义” 。为什么？这允许 React-DOM 最初渲染一个空列表。当执行or方法时，组件将使用填充的项目列表重新呈现。default


useEffectcomponentDid...

// Let's update our 'other' component
// destructure the `items` and initialize it as an array

const MyItems = ({items = []}) =>
  <ul>
    {items.map((item, i) => <li key={i}>item</li>)}
  </ul>