尝试在下面的action.js中呈现一些对象数据:
显然,请在下面列出一个错误:
Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
通常使用.map()方法呈现显示为行或任何形式的数据(在这种情况下,显然是数组)。
有没有一种渲染对象的方法?
在actions.js中
const data = {
Tabby: { name: "T-biddy", weight: "100kg", height: "100cm" },
Alley: { name: "C-Shizzle", weight: "50kg", height: "50cm" }
};
在reducer_cats.js中
export default function(state = [], action) {
switch (action.type) {
case GET_CATS:
return [action.payload, ...state];
default:
return state;
}
}
在cat_list.js中
renderCats() {
const { cats } = this.props;
const catsObj = cats[0];
let name;
let weight;
let height;
return _.mapKeys(catsObj, (cat, key) => {
name = cat.name;
weight = cat.weight;
height = cat.height;
const catRow = <Cat name={name} weight={weight} height={height}
/>;
return catRow;
});
render() {
return <div>{this.renderCats()}</div>;
}
}
在cat.js中
render() {
const { name, weight, height } = this.props;
return (
<div>
<span>{name}</span> /<span>{weight}</span>
</div>
);
}