React JS-Uncaught TypeError : this.props.data.map은 함수가 아닙니다.

reactjs로 작업 중이며 JSON 데이터를 표시하려고 할 때 (파일 또는 서버에서)이 오류를 방지 할 수없는 것 같습니다.

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

나는 보았다 :

"TypeError : this.props.data.map은 함수가 아닙니다."를 던지는 React 코드

React.js this.props.data.map ()은 함수가 아닙니다.

이들 중 어느 것도 문제를 해결하는 데 도움이되지 않았습니다. 내 페이지가로드 된 후 this.data.props가 정의되지 않았는지 확인할 수 있습니다 (그리고 JSON 객체에 해당하는 값이 있음-로 호출 할 수 있음 window.foo). ConversationList. map메서드가 undefined변수가 아닌 JSON 데이터에서 작동 하는지 어떻게 확인 합니까?

var converter = new Showdown.converter();

var Conversation = React.createClass({
  render: function() {
    var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="conversation panel panel-default">
        <div className="panel-heading">
          <h3 className="panel-title">
            {this.props.id}
            {this.props.last_message_snippet}
            {this.props.other_user_id}
          </h3>
        </div>
        <div className="panel-body">
          <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
        </div>
      </div>
    );
  }
});

var ConversationList = React.createClass({
  render: function() {

    window.foo            = this.props.data;
    var conversationNodes = this.props.data.map(function(conversation, index) {

      return (
        <Conversation id={conversation.id} key={index}>
          last_message_snippet={conversation.last_message_snippet}
          other_user_id={conversation.other_user_id}
        </Conversation>
      );
    });

    return (
      <div className="conversationList">
        {conversationNodes}
      </div>
    );
  }
});

var ConversationBox = React.createClass({
  loadConversationsFromServer: function() {
    return $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadConversationsFromServer();
    setInterval(this.loadConversationsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="conversationBox">
        <h1>Conversations</h1>
        <ConversationList data={this.state.data} />
      </div>
    );
  }
});

$(document).on("page:change", function() {
  var $content = $("#content");
  if ($content.length > 0) {
    React.render(
      <ConversationBox url="/conversations.json" pollInterval={20000} />,
      document.getElementById('content')
    );
  }
})

편집 : 샘플 대화 추가 .json

참고-호출 this.props.data.conversations하면 오류가 반환됩니다.

var conversationNodes = this.props.data.conversations.map...

다음 오류를 반환합니다.

포착되지 않은 TypeError : 정의되지 않은 '맵'속성을 읽을 수 없습니다.

다음은 dialogs.json입니다.

{"user_has_unread_messages":false,"unread_messages_count":0,"conversations":[{"id":18768,"last_message_snippet":"Lorem ipsum","other_user_id":10193}]}

이 .map함수는 배열에서만 사용할 수 있습니다. 예상 한 형식이 아닌
것 같습니다 data({}이지만 []를 예상합니다).

this.setState({data: data});

해야한다

this.setState({data: data.conversations});

"데이터"가 어떤 유형으로 설정되어 있는지 확인하고 그것이 배열인지 확인하십시오.

몇 가지 권장 사항 (propType 유효성 검사 및 clearInterval)으로 수정 된 코드 :

var converter = new Showdown.converter();

var Conversation = React.createClass({
  render: function() {
    var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="conversation panel panel-default">
        <div className="panel-heading">
          <h3 className="panel-title">
            {this.props.id}
            {this.props.last_message_snippet}
            {this.props.other_user_id}
          </h3>
        </div>
        <div className="panel-body">
          <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
        </div>
      </div>
    );
  }
});

var ConversationList = React.createClass({
 // Make sure this.props.data is an array
  propTypes: {
    data: React.PropTypes.array.isRequired
  },
  render: function() {

    window.foo            = this.props.data;
    var conversationNodes = this.props.data.map(function(conversation, index) {

      return (
        <Conversation id={conversation.id} key={index}>
          last_message_snippet={conversation.last_message_snippet}
          other_user_id={conversation.other_user_id}
        </Conversation>
      );
    });

    return (
      <div className="conversationList">
        {conversationNodes}
      </div>
    );
  }
});

var ConversationBox = React.createClass({
  loadConversationsFromServer: function() {
    return $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function(data) {
        this.setState({data: data.conversations});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },

 /* Taken from 
    https://facebook.github.io/react/docs/reusable-components.html#mixins
    clears all intervals after component is unmounted
  */
  componentWillMount: function() {
    this.intervals = [];
  },
  setInterval: function() {
    this.intervals.push(setInterval.apply(null, arguments));
  },
  componentWillUnmount: function() {
    this.intervals.map(clearInterval);
  },

  componentDidMount: function() {
    this.loadConversationsFromServer();
    this.setInterval(this.loadConversationsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="conversationBox">
        <h1>Conversations</h1>
        <ConversationList data={this.state.data} />
      </div>
    );
  }
});

$(document).on("page:change", function() {
  var $content = $("#content");
  if ($content.length > 0) {
    React.render(
      <ConversationBox url="/conversations.json" pollInterval={20000} />,
      document.getElementById('content')
    );
  }
})

나를 위해 일한 것은 props.data를 배열로 변환하는 것입니다. data = Array.from(props.data); 그러면 data.map()함수를 사용할 수 있습니다.

보다 일반적으로 새 데이터를 배열로 변환하고 concat과 같은 것을 사용할 수도 있습니다.

var newData = this.state.data.concat([data]);  
this.setState({data: newData})

이 패턴은 실제로 https://facebook.github.io/react/에 있는 Facebook의 ToDo 데모 앱 ( "애플리케이션"섹션 참조)에서 사용 됩니다 .

이를 위해 배열이 필요하지 않습니다.

var ItemNode = this.state.data.map(function(itemData) {
return (
   <ComponentName title={itemData.title} key={itemData.id} number={itemData.id}/>
 );
});

비동기 데이터가 도착하기 전에 구성 요소가 렌더링되기 때문에 발생하므로 렌더링하기 전에 제어해야합니다.

이 방법으로 해결했습니다.

render() {
    let partners = this.props && this.props.partners.length > 0 ?
        this.props.partners.map(p=>
            <li className = "partners" key={p.id}>
                <img src={p.img} alt={p.name}/> {p.name} </li>
        ) : <span></span>;

    return (
        <div>
            <ul>{partners}</ul>
        </div>
    );
}

• 속성이 null / 정의되지 않은 경우 맵을 확인할 수 없으므로 먼저 컨트롤을 수행했습니다.

this.props && this.props.partners.length > 0 ?

map함수 를 사용하려면 객체를 배열로 변환해야 합니다.

const mad = Object.values(this.props.location.state);

this.props.location.state다른 구성 요소에 전달 된 개체는 어디에 있습니까 ?

componentDidMount()데이터를 가져올 때 수명주기 시도