有没有一种方法可以在React.js(JavaScript)中呈现对象

时间:2019-05-18 06:28:51

标签: reactjs

尝试在下面的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>
     );
   }

0 个答案:

没有答案