マップ内のユーザ反応ルータ

Question

mapを使用して、リスト内のコンテンツのレンダリングにはreact-router（2.8.1を使用する必要があります）を使用します。

ただし、{this.props.children}を.mapの外側に表示すると、1つはレンダリングされます。

インライン/リストエントリの下に表示する必要があります。

どうすればこの問題を解決できますか？

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     movies: x.movies 
    }; 
    } 
    render() { 
    return (
     <div> 
     <h2>Repos</h2> 
     {x.movies.map(movie => 
      <span key={movie.id}> 
      {movie.name} 
      <NavLink to={"/repos/" + movie.id + "/next"}>React Router</NavLink> 
      </span> 
     )} 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

Answer 1

あなたは、私が余分Next Id:4、各エントリの間に表示されるように引き起こしていると考えているループ内childrenを、レンダリングされています。

子どもたちをループの外でレンダリングして、以下を試してみてください。

{ 
    x.movies.map(movie => (
     <span> 
     <Result key={movie.id} result= {movie}/> 
     </span> 
    )) 
} 
<span>{this.props.children}</span>