0

当我尝试编译我的代码时，我得到了错误：

错误图像

我正在关注一个教程，唯一的区别是 Airtable 中每个列/字段的名称。我的项目应该可以工作，但事实并非如此。我是不是忘了特别声明一些东西？有没有更简单的方法从 Airtable 获取图像？React Airtable 教程

import React, { Component } from 'react';
import { Container, Row, Col, Card, CardImg, CardText, CardBody,
  CardTitle, CardSubtitle, Button } from 'reactstrap';
import './main.css';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      skills: [],
    };
  }

  componentDidMount() {
    fetch('https://api.airtable.com/v0/appXy4JgrvUicfB5F/Resources?api_key=keyE0exOkvaAnJeS0')
    .then((resp) => resp.json())
    .then(data => {
       console.log(data);
       this.setState({ skills: data.records });
    }).catch(err => {
      // Error 
    });
  }

  render() {
    return (
      <div className="container">
        <Row>
          <Col>
            {this.state.skills.map(skill => <Roster {...skill.fields} /> )}
          </Col>
        </Row>
      </div>
    );
  }

}

export default App;

const Roster = ({ Name, Service, LinkedIN, GitHub, Twitter, Facebook, Picture }) => (
      <div className="card">
        <div className="card-body">
          <img className="card-img-left" src={Picture[0].url} />
          <h5 className="card-title">{Name}</h5>
          <p className="card-subtitle">{Service}</p>
          <p className="card-text">
            <small className="text-muted"><a href={LinkedIN}><i class="fab fa-linkedin"></i></a></small>&nbsp;
            <small className="text-muted"><a href={GitHub}><i class="fab fa-github-square"></i></a></small>&nbsp;
            <small className="text-muted"><a href={Twitter}><i class="fab fa-twitter-square"></i></a></small>&nbsp;
            <small className="text-muted"><a href={Facebook}><i class="fab fa-facebook"></i></a></small>&nbsp;
          </p>
        </div>
      </div>
);
4

1 回答 1

1

您正在使用的 Airtable API 没有Picture大量对象的属性，并且在尝试访问时它们会失败，Picture[0]因为 Picture 是undefined.

如果您没有所有对象的图像，简单的方法是Picture在渲染之前检查是否有第一个：

{Picture && <img className="card-img-left" src={Picture[0].url} />}

Stackblitz 上的演示

于 2019-04-15T18:30:28.577 回答