LaravelでReactJSを使ってforeachをレンダリングする方法

Question

私は複数のAxiosレスポンスのforeachをやりたい。私は私ではない、単一のリターンが、ループからのすべてのリターンを表示したいクラスをレンダリングする第二のファイルで

var self = this; 
    axios.get('http://reactlaravel.dev/container/count').then(function (response) { 

     for (var container in response.data) { 
      var d = response.data[container]; 

      self.setState({ 
       name: d.name, 
       total: d.total, 
       current: d.current 
      }) 
     } 
    }) 

：私はcomponentDidMount()に座って、次のコードを持っています。これでforeachを作るにはどうすればいいですか？

return (
     <div className="container"> 
      <h1>We hebben nog <strong>{this.props.current}</strong> {this.props.name} zeecontainers over.</h1> 

      <div className="progress"> 
       <div className={progressBarType} role="progressbar" aria-valuenow={progressBar} aria-valuemin="0" aria-valuemax="100" style={style}> 
        <span className="sr-only">{progressBar}% Complete (success)</span> 
       </div> 
      </div> 
     </div> 
    ); 

Answer 1

コンテナを子コンポーネントにして、親コンポーネントにデータフェッチを残す必要があります。その後、データを受け取ったら、foreachを実行して、コンテナデータを小道具として渡します。

const containers = [{name: 'Test', total: 95, current: 45},{name: 'Test 2', total: 95, current: 85},{name: 'Test 3', total: 25, current: 25}] 
 

 
class Parent extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     containers: [] 
 
    }; 
 
    } 
 
    componentDidMount() { 
 
    var self = this; 
 
    //axios.get('http://reactlaravel.dev/container/count').then((response) => { 
 
     
 
     // Mocking data call here 
 
     this.setState({ 
 
     containers: containers //response.data 
 
     }); 
 

 
      
 
     //}) 
 
    } 
 
    render() { 
 
    const containers = this.state.containers.map((container, i) => <Container key={i} {...container} />); 
 

 
    return (
 
     <div> 
 
     {containers} 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
const Container = ({ name, total, current }) => (
 
    <div> 
 
    <span>{name}</span> 
 
    <span>{total}</span> 
 
    <span>{current}</span> 
 
    </div> 
 
); 
 

 
ReactDOM.render(<Parent />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>