React函数组件中使用map报Expression expected错误如何解决

核心错误原因 #

• new是JavaScript保留关键字，你直接把它作为map回调的形参名，直接触发语法解析错误，这就是Expression expected报错的直接诱因。同时你形参定义为new，后续调用属性时用的是article，参数名完全不匹配，就算解决了关键字问题也会报变量未定义错误。
• React DOM元素的类名属性应该用className而非class，class是JS保留字，直接写class会导致类名不生效。
• 列表遍历渲染的每个项缺少唯一key属性，会触发React的列表警告，也会影响diff性能。
• 可选修复点：你代码里打印的clciked为拼写错误，可按需修改为clicked。

修复后参考代码 #

return(
        <div className="sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-4 space-y-4 sm:space-y-0">
            {news.articles.map((article, index) => {
                // 优先用article自带的唯一字段比如article.id作为key，没有再用index
                return (
                    <Card
                    key={index}
                    title={article.title}
                    content={article.content}
                    onClick={() => {
                      console.log("clicked");
                    }}
                    />
                )
            })
            } 
        </div>
)

内容的提问来源于stack exchange，提问作者CCCC