如何访问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) 
    ); 
     }); 
    }; 
}

'wine.ratings'是对象的数组。 React将呈现组件和文本/字符串。您需要以某种方式将其映射出来，例如 '{wine.ratings.map（（r）=> r.stars}' – char

答

ratings是对象的数组，和对象是无效的反应儿童作为错误信息表明。您可以映射评分阵列，就像您映射葡萄酒阵列一样。您还需要提供密钥。通常你会使用这些ID，但是你的评分没有ID。虽然不是很好，但可以使用数组索引作为键。

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

如何访问JSX中的嵌套数组

相关推荐