React.js는 어레이를 통해 루프를 생성합니다.

React.js는 어레이를 통해 루프를 생성합니다.

10인용 테이블을 표시하려고 합니다.저는 에이잭스를 통해 데이터를 받아 소품으로 제 아이에게 전달합니다.

var CurrentGame = React.createClass({

  // get game info
  loadGameData: function() {
    $.ajax({
      url: '/example.json',
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error('#GET Error', status, err.toString());
      }.bind(this)
    });
  },

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

  componentDidMount: function() {
    this.loadGameData();
  },

  render: function() {
    return (
      <div className="CurrentGame">
        <h1> Current Game Information</h1>
        <PlayerList data={this.state.data}/>
      </div>
    );
  }
});

플레이어를 렌더링할 목록 구성 요소가 필요합니다.

var PlayerList = React.createClass({


  render: function() {

    // This prints the correct data
    console.log(this.props.data);

    return (
      <ul className="PlayerList">
        // I'm the Player List {this.props.data}
        // <Player author="The Mini John" />

        {
          this.props.data.participants.map(function(player) {
            return <li key={player}>{player}</li>
          })
        }
      </ul>
    )
  }
});

그래서 나는Uncaught TypeError: Cannot read property 'map' of undefined.

무슨 일이 일어나고 있는지 알 수 없습니다.콘솔 로그에 올바른 데이터가 표시되지만 반환 시 액세스 할 수 없습니다.

제가 무엇을 빠뜨리고 있나요?

인CurrentGame루프를 사용하려고 하기 때문에 초기 상태를 변경해야 합니다.participants하지만 이 속성은undefined그래서 에러가 나는 거예요.

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

또, 로서player에.map이Object당신은 그것으로부터 속성을 얻어야 한다.

this.props.data.participants.map(function(player) {
   return <li key={player.championId}>{player.summonerName}</li>
   // -------------------^^^^^^^^^^^---------^^^^^^^^^^^^^^
})

Example

@Alexander가 해결한 것처럼 이 문제는 비동기 데이터 로드 중 하나입니다.즉시 렌더링하고 비동기 Ajax 콜이 해결되어 입력될 때까지 참가자를 로드하지 않습니다.data와 함께participants.

그들이 제공한 솔루션의 대안은 참가자가 존재할 때까지 렌더링을 방지하는 것입니다.이러한 방법은 다음과 같습니다.

    render: function() {
        if (!this.props.data.participants) {
            return null;
        }
        return (
            <ul className="PlayerList">
            // I'm the Player List {this.props.data}
            // <Player author="The Mini John" />
            {
                this.props.data.participants.map(function(player) {
                    return <li key={player}>{player}</li>
                })
            }
            </ul>
        );
    }

맵을 하기 전에 간단하게 조건부 확인을 할 수 있습니다.

{Array.isArray(this.props.data.participants) && this.props.data.participants.map(function(player) {
   return <li key={player.championId}>{player.summonerName}</li>
   })
}

days .map은 두 가지 방법으로 실행할 수 있지만 다음과 같은 조건부 체크가 필요합니다.

.map with return

{Array.isArray(this.props.data.participants) && this.props.data.participants.map(player => {
   return <li key={player.championId}>{player.summonerName}</li>
 })
}

.map은 반환되지 않습니다.

{Array.isArray(this.props.data.participants) && this.props.data.participants.map(player => (
   return <li key={player.championId}>{player.summonerName}</li>
 ))
}

위의 두 가지 기능은 모두 동일합니다.

언급URL : https://stackoverflow.com/questions/28320438/react-js-create-loop-through-array