如何在JSX中訪問嵌套數組

Question

我是新的react-redux應用程序。 我正在嘗試制作一個酒單，該酒單將基於​​來自服務器（wines.json）的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 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 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是一個對象數組，錯誤消息提示對象無效，對象無效。 您可以映射到評分數組，就像通過wines數組進行映射一樣。 您還需要提供密鑰。 通常，您會使用ID，但您的評分中沒有ID。 盡管效果不佳，但是您可以將數組索引用作鍵。

因此，代替<span>wine.ratings</span>是<span>{wine.ratings.map((rating,indx) => <span key={indx}>{rating.stars}</span>)}</span>