Как вытащить изображения из базы данных Airtable? - PullRequest
Новая
       15

Как вытащить изображения из базы данных Airtable?

0 голосов
/ 15 апреля 2019

Когда я пытаюсь скомпилировать свой код, я получаю сообщение об ошибке:

Изображение ошибки

Я следовал учебному пособию, и единственным отличием является название каждогостолбец / поле в Airtable.Мой проект должен работать, но это не так.Я забыл объявить что-то конкретное?Есть ли более простой способ получить изображения из Airtable? React Airtable Tutorial 

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>
);

1 Ответ

1 голос
/ 15 апреля 2019

API Airtable, который вы используете, не имеет свойства Picture для большого количества объектов, и они терпят неудачу при попытке доступа к Picture[0], потому что Picture равен undefined.

Если у вас нет изображений для всех объектов, простым способом было бы проверить, есть ли сначала Picture перед рендерингом: 

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

Демонстрация по Stackblitz

...