React: show message if no image in Api using ternary operator. Getting parsing error: unexpected token

Question

我正在用 ReactJS 做一个项目。基本上它是从 Api 访问数据。以下是 App.js

中的代码

class App extends Component {
constructor(){
super();
this.state ={
  signs:  []
 }
}

componentDidMount(){
var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
targetUrl = 'https://s3.eu-west-2.amazonaws.com/openplaques/open-plaques-london-2019-03-13.json'
fetch(proxyUrl + targetUrl)
.then(response => response.json())
.then(plaque => this.setState({signs: plaque}));
  }
render(){
return(
  <div className='App'>
    <CardList signs={this.state.signs}/>
  
  </div>
  )
}
}

我还有另一个显示卡片列表的组件。

import React from 'react';
import { Card } from '../card/card.component';
import './card-list.styles.css';

export const CardList = (props)=> {
console.log(props);
return <div className='card-list'>
   {props.signs.map(sign => (
       <Card key={sign.id} sign={sign} />
   ))}
  </div>
  }

应用的卡片组件有以下代码：

import React from 'react';
import './card.styles.css';
export const Card = (props) => (
<div className='card-container'>
   
   {(props.sign.photographed?) ? <img alt="sign" src={props.sign.thumbnail_url} width="200" 
   height="200"/> : null}
    <h1>{props.sign.title}</h1>
    <p>{props.sign.inscription}</p>
    </div>
    )

这是我遇到上述错误的地方。不是所有的参赛作品都拍下了吗？有一个条目。因此，如果 Api 中没有图像，我将尝试使用三元运算符。任何帮助将不胜感激。

Answer 1

更新

如果您有一个名为 .photographed? 的属性，请尝试通过调用 props.sign["photographed?"] 来访问它。

看到这一行：

{(props.sign.photographed?) ? <img alt="sign" src={props.sign.thumbnail_url} width="200"

更具体地说，请参阅：

{(props.sign.photographed?) ?

还有一点...

...photographed?)

(不明显的请看额外的?).

三元语法是condition ? truthy : falsey。因此，您的行应该是：

{props.sign.photographed ? <img alt="sign" src={props.sign.thumbnail_url} width="200"
...

Answer 2

你的字段名作为其中的一个特殊字符?。您需要使用括号语法才能正确访问它：

// Invalid
props.sign.photographed?
// Valid
props.sign["photographed?"]

React: show message if no image in Api using ternary operator. Getting parsing error: unexpected token

React: show message if no image in Api using ternary operator. Getting parsing error: unexpected token

api

conditional-operator

reactjs

更新