React中导入并映射JSON对象数组时遇语法错误求解决

错误原因 #

你的代码报错是因为return语句的括号内直接用{}包裹了map结果——在JSX语法中，return的最外层必须是一个合法的JSX元素（或Fragment），直接写{}会被解析为JavaScript对象字面量，而非JSX表达式，因此babel会提示"预期逗号"（对象键值对需要逗号分隔）。

另外还有一个小问题：你把key属性放在了内部的videos_play元素上，正确的做法是把key放在map返回的每个元素的最外层容器上，否则React的列表diff算法会失效。

修正方案 #

方案1：添加根容器div #

用一个外层div包裹所有map生成的元素，这是最直观的方式：

import './videos_css.css';
import VideosJSON from '../../assets/mock.json';

function Videos(){
    return(
        <div className="videos-container">
            {VideosJSON.videos_json.map((item, key) => (
                <div className='videos' key={key}>
                    <div className='videos_play'> {item.video}</div>
                    <div className='videos_info'>
                        <h1 className='videos_info_title'> {item.title}</h1>
                        <h2 className='videos_info_material'>{item.material}</h2>
                        <p className='videos_info_description'> {item.description}</p>
                    </div>
                </div>
            ))}
        </div>
    )
}

export default Videos

方案2：使用React.Fragment（无额外DOM节点） #

如果不想多生成一个DOM节点，可以用React的Fragment语法（短语法为<>...</>）：

import './videos_css.css';
import VideosJSON from '../../assets/mock.json';

function Videos(){
    return(
        <>
            {VideosJSON.videos_json.map((item, key) => (
                <div className='videos' key={key}>
                    <div className='videos_play'> {item.video}</div>
                    <div className='videos_info'>
                        <h1 className='videos_info_title'> {item.title}</h1>
                        <h2 className='videos_info_material'>{item.material}</h2>
                        <p className='videos_info_description'> {item.description}</p>
                    </div>
                </div>
            ))}
        </>
    )
}

export default Videos

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