[英]How to access nested arrays in JSX
我是新的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)
);
});
};
}
ratings
是一个对象数组,错误消息提示对象无效,对象无效。 您可以映射到评分数组,就像通过wines数组进行映射一样。 您还需要提供密钥。 通常,您会使用ID,但您的评分中没有ID。 尽管效果不佳,但是您可以将数组索引用作键。
因此,代替<span>wine.ratings</span>
是<span>{wine.ratings.map((rating,indx) => <span key={indx}>{rating.stars}</span>)}</span>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.