Отображение React из файла семян

Question

На скриншоте ниже показана моя страница Evolution Part 1, сделанная с использованием HTML.

Теперь я пытаюсь использовать состояние реакции https://github.com/RobertWSON/Personal-ship-project/blob/robs-shipslist-under-cruiselines/client/components/EvolutionPart1.jsx, чтобы получить корабли класса c отображается в полях.

Я перехожу от компонента Evolution Part 1 к новому компоненту под названием ClassicShips, который забирает корабли по идентификатору из моего файла семян evo1 https://github.com/RobertWSON/Personal-ship-project/tree/robs-shipslist-under-cruiselines/seeds .

Мой вопрос: когда я создаю карту, как показано ниже, как она узнает, что должна получать данные из файла семян evo1?

render()    { 
        return  (
            <div>
                <div className = "header">
                    <h1>Evolution of Cruise Ships</h1> 
                </div>
                <div className = "evoContainer">
                    {this.state.classicShips.map(ship =>    {
                    return  ( 
                            <ClassicShips key={ship.id} {...ship}/>
                    )  
                 }
              )}

https://i.stack.imgur.com/egDh9.png

Answer 1

Вопрос

откуда он знает, что он должен получать данные из файла семян evo1?

Если вопрос заключается в том, как пользовательский интерфейс выбирает и отображает данные ответа

getClassics from ../api/api

Выполняется запрос GET для получения массива кораблей.

Остальное лежит в EvolutionPart1. У вас есть пустой массив в качестве начального состояния classicShips, поэтому, когда компонент монтируется, он может отображать пустой массив. также при монтировании он вызывает this.setUpClassics, который является служебной функцией для вызова функции API getClassics сверху. Когда эта выборка разрешается и возвращает массив данных о корабле, он this.setState({ classicShips: res }) обновляется. Это вызывает повторную визуализацию компонента и отображение новых данных.

EvolutionPart1

class EvolutionPart1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      classicShips: [], // <-- (1) initial empty array
    };
    this.setUpClassics = this.setUpClassics.bind(this);
  }

  componentDidMount() {
    this.setUpClassics(); // <-- (2) fetch ship data
  }

  setUpClassics() {
    getClassics().then(res => {
      this.setState({
        classicShips: res // <-- (3) setState
      });
    });
  }

  render() {
    return (
      ...
        <div className="evoContainer">
          {this.state.classicShips.map(ship => { // <-- (4) map ship data to JSX
            return (
              <div className="evosShips" key={ship.id}>
                <h3>{ship.ship_name}</h3>
                <img src={ship.img} title={ship.img_title} />
                <p>Find out more on {ship.ship_name} , Click on image</p>
                <p>{ship.ship_name} Ship Horn</p>
              </div>
            );
          })}
      ...
    );
  }
}

Если вопрос в том, как сервер знает, как загрузить файл evo1 seed

• Получает конфигурацию из knexfile. js
• БД встала и читает в семенах
• dbclassics подключает к Evo1 таблица
• API конечная точка обслуживает данные