JSXでネストされた配列にアクセスする方法

Question

私は新しいreact-reduxアプリケーションです。私はサーバーからのjsonファイル（wines.json）の星の平均数に基づいてランク付け（5つのうちx）を表示するワインリストを作成しようとしています。私Wines.jsxファイルでは、私はそのような{wine.name}や{wine.vintage}などのワインからJSONカテゴリの数をレンダリングするが、私は試してみて{wine.ratings}をレンダリングするとき、私は、コンソールにこのエラーを取得：

Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {stars}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method ofワイン.

それwines.jsonファイルの 'ratings'には 'star'オブジェクトで構成されたネストされた配列が含まれているため、{wine.ratings}はレンダリングされません。そのデータにアクセスするにはどうすればよいですか？

wines.json：

"wines": [{ 
"id": "f2ca57a5-d9da-4808-9164-8d6e0da0aef5", 
"name": "Apothic Red", 
"vintage": "2015", 
"vineyard": "Apothic", 
"type": "Red Blend", 
"region": "California", 
"unitsSold": 51, 
"ratings": [{ 
    "stars": 5 
}, { 
    "stars": 3 
}] 
    }... 

wines.jsx：

import React, {Component} from 'react'; 
import PropTypes from 'prop-types'; 
import {bindActionCreators} from 'redux'; 
import {connect} from 'react-redux'; 

import * as actionCreators from './wineActions'; 

import './wines.scss'; 
import { SplitButton } from 'react-bootstrap'; 
import './ratings'; 


export class Wines extends Component { 
    componentDidMount() { 
    this.props.actions.fetchWines(); 
    } 

    render() { 
    return (
     <div className="wines"> 
     <row> 
      <h1 className="wines__title" >Wine List</h1> 
     </row> 
     <row> 
      <SplitButton title="Select Year"></SplitButton> 
     </row> 
     <ul className="wines__list"> 
      { 
      this.props.wines 
       .map(wine => 
       <div key={wine.id}> 

         <div className='divLeft'> 
         <img src='front-end-challenge--provo17/client/wines/wine-placeholder.png' /> 
         </div> 

         <div className='divRight'> 
         <h3>{wine.name}, {wine.vintage}</h3> 
         <br /> 
         <p>{wine.type}</p> 
         <span>{wine.ratings}</span> 
         <p>({wine.unitsSold})</p> 
         </div> 

         <hr /> 

       </div>) 
      } 
     </ul> 
     </div> 
    ); 
    } 
} 



// React.render(<FormComponent />, document.getElementById('star-rating')); 

Wines.propTypes = { 
    wines: PropTypes.array, 
    actions: PropTypes.object 
}; 

function mapStateToProps(state) { 
    return { 
    ...state.wines 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { actions: bindActionCreators(actionCreators, dispatch) }; 
} 

    export default connect(mapStateToProps, mapDispatchToProps)(Wines); 

wineActions.js：

export function receiveWines(wines) { 
    return { 
    type: 'FETCH_WINES_SUCCESS', 
    wines 
    }; 
} 

export function fetchWines() { 
    return function(dispatch) { 

    return fetch(`https://sb-challenge-provo17.c9users.io/api/v1/wines`) 
     .then(response => { 
     var resp = response.json(); 
     return resp; 
     }) 

     .then(json => { 
     dispatch(receiveWines(json.wines) 
    ); 
     }); 
    }; 
} 

Answer 1

ratingsは、オブジェクトの配列であり、オブジェクトが反応有効でありませんエラーメッセージが示唆しているように子供。ワイン配列をマッピングするのと同じように、格付け配列をマップすることができます。また、キーを提供する必要があります。通常はそれらのIDを使用しますが、あなたのレーティングにはIDはありません。それほど良いわけではありませんが、配列インデックスをキーとして使用できます。

ので、代わりの<span>wine.ratings</span>は<span>{wine.ratings.map((rating,indx) => <span key={indx}>{rating.stars}</span>)}</span>