如何訪問JSX中的嵌套數組

我是新的react-redux應用程序。我正在嘗試製作一個基於json文件中服務器的平均星星數（wines.json）來顯示排名（x out of 5 stars）的酒單。在我Wines.jsx文件，我渲染幾個JSON類，從葡萄酒，如{wine.name}和{wine.vintage}，但是當我嘗試和渲染{wine.ratings}我得到這個錯誤控制檯：如何訪問JSX中的嵌套數組

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) 
    ); 
     }); 
    }; 
}

來源

2017-06-14 Gregory Provo

'wine.ratings'是對象的數組。 React將呈現組件和文本/字符串。您需要以某種方式將其映射出來，例如 '{wine.ratings.map（（r）=> r.stars}' – char

ratings是對象的數組，和對象是無效的反應兒童作爲錯誤信息表明。您可以映射評分陣列，就像您映射葡萄酒陣列一樣。您還需要提供密鑰。通常你會使用這些ID，但是你的評分沒有ID。雖然不是很好，但可以使用數組索引作爲鍵。

所以不是wine.ratings具有{wine.ratings.map((rating,indx) => {rating.stars})}

來源

2017-06-15 00:09:34 redFur

如何訪問JSX中的嵌套數組

回答

相關問題