代码之家 › 专栏 › 技术社区 › Zain763

尝试在React中映射数组时获取意外标记,应为“,”

reactjs javascript

Zain763 · 技术社区 · 5 年前

所以,这就是我在回报中所做的:

return (
    
    <React.Fragment>
      <Styles>
      <Container>
          <Row className="rows container">
          {results.length > 0 && (  
          {results.map(result => (
            
            <Col className="columns " xs={12} sm={6} md={4} lg={3} >
              <img src={result.poster_path}  alt="movie poster" />
              </Col>
              
          ))}
          )} 
              
          
        </Row>
        </Container>
        </Styles>
    </React.Fragment>
  )

但是,它给了我一个意外的错误标记,应该是“,”。我不明白,尤其是因为我在另一个组件中使用了相同的语法,并且没有报告任何错误。

1 回复 | 直到 5 年前

Twiggeh 5 年前

你的回报声明应该是这样的

return (
    <React.Fragment>
        <Styles>
            <Container>
                <Row className='rows container'>
                    {results.length > 0 &&
                        results.map(result => (
                            <Col className='columns ' xs={12} sm={6} md={4} lg={3}>
                                <img src={result.poster_path} alt='movie poster' />
                            </Col>
                        ))}
                </Row>
            </Container>
        </Styles>
    </React.Fragment>
)

(我去掉了周围的方括号 results.map )

方括号用于通知jsx您将在jsx中执行javascript。你已经开始执行了 {results.length ,如果在js执行块中添加另一对括号,则在创建对象时js会看到它,因此会出现预期的逗号错误。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前