どのように適切に反復するWp残りのAPIを介して検索されたポストオブジェクトの配列を介して反応するjs

Question

こんにちは:)私はwpの残りのAPIと反応してjsと私は正常にwp残りのAPIからデータを取得し、適切な方法でデータを反応させる。コンソールに「配列またはイテレータ内の各子に固有の」キー「prop」が必要ですというエラーメッセージが表示されます。私はこの問題に関する反応の文書を読んだが、理解しなかった。ここまでは私がこれまでに書いたものです。すべてのヘルプ素晴らしいことだ

 class Home extends React.Component{ 
     componentDidMount(){ 
     const API_URL = 'http://localhost/wordpress/wp-json/wp/v2/posts/'; 
     this.serverRequest = $.get(API_URL, function (result) { 
      this.setState({ 
      result:result, 
      loaded:true 
      }); 
     }.bind(this)); 
     } 
     constructor(props) { 
     super(props); 
     this.state ={result:null,loaded:false}; 
     autoBind(this); 
     } 
     render(){ 
     if (this.state.loaded) { 
      return(
      <div> 
       {this.state.result && <Portfolio data = {this.state.result}/>} 
      </div> 
     ) 
     } 
     return(
      <div>loading... 
      </div> 
     ) 

     } 
    } 
    export default Home; 

あなたに感謝し、データを支える先のポートフォリオのコンポーネントが渡され、適切な方法

class Portfolio extends React.Component{ 
    constructor(props) { 
    super(props); 
    autoBind(this); 
    } 
    render(){ 
    var contents=[]; 
    for (var i = 0; i < this.props.data.length; i++) { 
    if (this.props.data[i].categories[0] == 5) { 
     var productImage ={ 
     backgroundImage:'url('+ this.props.data[i].featured_image + ')', 
     backgroundSize: '100% 100%' 
     } 
     contents.push(
      <div id="portfolio-product-item" style ={productImage} > 
       <div id ="portfolio-product-item-details" > 
       <h3>{this.props.data[i].slug}</h3> 
       <div dangerouslySetInnerHTML={{__html: this.props.data[i].content.rendered}} /> 
       </div> 
      </div> 
    ); 
    } 
    } 
    return(
     <section className="portfolio"> 
      {contents} 
     </section> 
    ) 
    } 
} 
export default Portfolio; 

Answer 1

Portfolioコンポーネントをクリーナーにする。

私は、ロジックを分割し、メインレンダリングとは別のメソッドを作成することをお勧めします。

class Portfolio extends React.Component{ 
    constructor(props) { 
    super(props); 
    autoBind(this); 
    } 

    renderPortfolioOption(index, option) { 
    const { data } = this.props; 

    if (option.categories[0] == 5) { 
     var productImage ={ 
     backgroundImage:'url('+ option.featured_image + ')', 
     backgroundSize: '100% 100%' 
     } 

     return(
     <div key={index} id="portfolio-product-item" style ={productImage} > 
      <div id ="portfolio-product-item-details" > 
      <h3>{option.slug}</h3> 
      <div dangerouslySetInnerHTML={{__html: option.content.rendered}} /> 
      </div> 
     </div> 
    ); 
    } 
    } 

    render() { 
    const { data } = this.props; 

    if (data.length) return null; 

    return(
     <section className="portfolio"> 
     { data.map((index, option) => { return this.renderPortfolioOption(index, option); }) } 
     </section> 
    ) 
    } 
} 

export default Portfolio; 

Answer 2

ではありません。このようなデータは私がすべてを渡ったしていないレンダリングあなたのコードは、ちょうどあなたが持っている "キー"エラーに関連しています。 問題はここにある -

contents.push(
     <div id="portfolio-product-item" style ={productImage} > 
      <div id ="portfolio-product-item-details" > 
      <h3>{this.props.data[i].slug}</h3> 
      <div dangerouslySetInnerHTML={{__html: this.props.data[i].content.rendered}} /> 
      </div> 
     </div> 
); 

portfolio-product-itemのidを持つ父親のdiv要素もそう属性key書き込むための適切な方法を持っている必要があり、それは - https://facebook.github.io/react/docs/multiple-components.html#dynamic-childrenため -

contents.push(
     <div key={i} id="portfolio-product-item" style ={productImage} > 
      <div id ="portfolio-product-item-details" > 
      <h3>{this.props.data[i].slug}</h3> 
      <div dangerouslySetInnerHTML={{__html: this.props.data[i].content.rendered}} /> 
      </div> 
     </div> 
); 

はを見てくださいさらに詳しい情報