Question

创建了一个jsbin来演示错误，你可以在这里看到错误https://jsbin.com/muhuxunome/1/edit

class Hello extends React.Component {
  render() {
    const normalizedStats = [
  {
    "name": "Confirmed",
    "count": 7
  },
  {
    "name": "Unprocessed",
    "count": 2
  },
  {
    "name": "Not Suitable",
    "count": 9
  },
  {
    "name": "Shortlisted",
    "count": 17
  }
];

    return(
            <div>
            normalizedStats.map(obj => 
                <li>{obj.name} ({obj.count})</li>
            )
            </div>
        )
  }
}

我得到的obj错误没有定义？我尝试了lodash的地图，但不确定为什么es2015的地图在这里有错误。

Answer 1

你忘记了“{}”

return (
    <div>
        {normalizedStats.map((obj, index) => {
            return <li key={index}>{obj.name} ({obj.count})</li>;
        })}
    </div>
);

Answer 2

只要您想在JSX中进行JavaScript插值，就需要使用花括号。

更改

normalizedStats.map(obj => 
  <li>{obj.name} ({obj.count})</li>
)

到

{normalizedStats.map(obj => 
  <li>{obj.name} ({obj.count})</li>
)}

es2015 map不支持对象数组？

2 个答案: