React：JSX 中的三元运算产生“意外令牌”错误

Question

我正在尝试在开始显示之前检查数组是否为空。这是我的代码：

{ item2.user.entities.url !== null 
              ? ({item2.user.entities.url.urls.map((item3,index3) => {
                    return(
                        <a href={item3.expanded_url} target='_blank'>{item3.expanded_url}</a>
                      )
                    })
                  })
              : null
            }

我不确定。显示错误

babel.min.js:8 Uncaught SyntaxError: Inline Babel script: Unexpected token, expected , (187:23) 
  186 |           { item2.user.entities.url !== null 
> 187 |               ? ({item2.user.entities.url.urls.map((item3,index3) => {
      |                        ^
  188 |                     return(
  189 |                         <a href={item3.expanded_url} target='_blank'>{item3.expanded_url}</a>
  190 |                       )
    at t.le.raise (babel.min.js:8)
    at t.Z.unexpected (babel.min.js:7)
    at t.Z.expect (babel.min.js:7)
    at t.se.parseObj (babel.min.js:8)
    at t.se.parseExprAtom (babel.min.js:8)
    at t.parseExprAtom (babel.min.js:9)
    at t.se.parseExprSubscripts (babel.min.js:8)
    at t.se.parseMaybeUnary (babel.min.js:7)
    at t.se.parseExprOps (babel.min.js:7)
    at t.se.parseMaybeConditional (babel.min.js:7)

无法理解错误是什么

Answer 1

你有多余的{}

const a = item2 => {
  item2.user.entities.url !== null
    ? item2.user.entities.url.urls.map((item3, index3) => {
        return (
          <a href={item3.expanded_url} target="_blank">
            {item3.expanded_url}
          </a>
        );
      })
    : null;
};

Answer 2

您不能在另一个 JSX 表达式中包含 JSX 表达式 ({})。

你需要用像<div>这样的元素来包装你的第二个JSX表达式：

{item2.user.entities.url !== null ? (
    <div>
        {item2.user.entities.url.urls.map((item3, index3) => (
            <a href={item3.expanded_url} target='_blank'> 
                {item3.expanded_url}
            </a>
        )}
    </div>
 ) : null}

或者把它变成一个表达式：

{item2.user.entities.url !== null ? item2.user.entities.url.urls.map((item3, index3) => (
    <a href={item3.expanded_url} target='_blank'> 
        {item3.expanded_url}
    </a>
 ) : null}