オブジェクトの配列のリアクションセット状態

Question

title、description、image-URLプロパティを含む10個のオブジェクト（「ブログ」と呼ぶことができます）の配列があります。 HTMLタグの各プロパティをラップし、それらをすべてエクスポートして、すべてがWebページにロードされるようにする必要があります。

私の現在のコードでは、現在の状態のオブジェクトを1ページしか読み込めません。すべてのオブジェクトを同じ状態にするにはどうすればよいですか？

class NewBlogs extends React.Component { 
    constructor(props) { 
     this.state = { 
      title: [], 
      description: [], 
      image: [], 
      loading: true 
     }; 
    } 
    componentDidMount() { 
     axios.get('/new-blogs').then(data => { 
      const blogs = data.data; 
      var component = this; 

       for(var i in blogs) { 
        component.setState({ 
         title: blogs[i].title, 
         description: blogs[i].description, 
         image: blogs[i].image, 
         loading: false 
        }); 
       } 
      }) 
      .catch(function(error) { 
       console.log(error); 
      }); 
     } 
     render() { 
      return (
       <div> 
        <h2>New Blogs:</h2> 
        <h3>{this.state.title}</h3> 
        <em>{this.state.description}</em> 
        <img src={this.state.image}></img> 
       </div> 
      ); 
     } 
    } 
    export default NewBlogs 

Answer 1

は、私がテスト/これを実行しますが、APIの呼び出しは、オブジェクトのリストを返すように見えるこの

ような何かをしようとしていません。もしそうなら、xhrが完了したら状態を設定し、一度falseをロードするように設定します。

反応では、render（）はあなたのリストを反復することができます。これを行う最も簡単な方法は、 '.map（）'です。リスト内の各オブジェクトの反応要素を返すだけです。

はまた

class NewBlogs extends React.Component { 
 
    constructor(props) { 
 
     this.state = { 
 
      list: [], 
 
      loading: true 
 
     }; 
 
    } 
 
    componentDidMount() { 
 
     axios.get('/new-blogs').then(data => { 
 
      // const blogs = data.data; 
 
      // var component = this; 
 
      this.setState({list: data.data, loading: false }) 
 
       // for(var i in blogs) { 
 
       //  this.setState({ 
 
       //   title: blogs[i].title, 
 
       //   description: blogs[i].description, 
 
       //   image: blogs[i].image, 
 
       //   loading: false 
 
       //  }); 
 
       // } 
 
      }) 
 
      .catch(function(error) { 
 
       console.log(error); 
 
      }); 
 
     } 
 
     render() { 
 
      return (
 
       <div> 
 
        {this.state.list.map(e => (
 
         <h2>New Blogs:</h2> 
 
         <h3>{e.title}</h3> 
 
         <em>{e.description}</em> 
 
         <img src={e.image}></img> 
 
        ))} 
 
        
 
       </div> 
 
      ); 
 
     } 
 
    } 
 
    export default NewBlogs