React.js报错'Expected an assignment or function call and instead saw an expression'求助
问题根因
- 首先你把需要渲染的img、h3元素错误放置在
onClick点击事件的回调函数中,onClick仅用于执行点击触发的业务逻辑,不会承担组件内容渲染的作用。 - 其次你写在onClick回调中的两个三元表达式,仅生成了无意义的HTML字符串,既没有赋值给变量、也没有作为返回值、更没有调用任何处理函数,属于孤立的无效表达式,因此ESLint会抛出
Expected an assignment or function call and instead saw an expression报错。 - 额外注意:React中渲染元素要使用JSX语法,不能用反引号包裹成字符串,动态属性值需要用
{}包裹而非模板字符串的${}语法。
修复后代码
records.map((record, index) => { return ( <div key={index} className="object-preview" onClick={(event) => { event.preventDefault(); setFeaturedResult(record); // 点击事件内仅保留业务逻辑即可 }} > {/* 渲染内容放在div标签内部,用大括号包裹JS表达式 */} {record.primaryimageurl ? <img src={record.primaryimageurl} alt={record.description}/> : null} {record.title ? <h3>{record.title}</h3> : <h3>MISSING INFO</h3>} </div> ); })
内容的提问来源于stack exchange,提问作者HWrobo
相关产品推荐
相关产品推荐

