reactjs - 来自种子文件的反应映射

Question

下面的屏幕截图中显示的是我使用 HTML 完成的 Evolution Part 1 页面。

我现在正在尝试使用反应状态https://github.com/RobertWSON/Personal-ship-project/blob/robs-shipslist-under-cruiselines/client/components/EvolutionPart1.jsx让经典船只显示在框中。

我正在做的是从 Evolution 第 1 部分组件到一个名为 ClassicShips 的新组件，该组件按 id order 从我的 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

标签： reactjsmapping

Answer 1

问题

它怎么知道它应该从 evo1 种子文件中获取数据？

如果问题是关于 UI 如何获取和映射响应数据

getClassics从../api/api

这会执行一个 GET 请求来获取一系列船只。

剩下的就在EvolutionPart1. 您有一个空数组作为初始classicShips状态，因此当组件挂载时，它可以呈现一个空数组。当它挂载它时，它也会调用这是一个从上面this.setUpClassics调用 API 函数的实用函数。当此提取解析并返回要更新getClassics的船舶数据数组时。this.setState({ classicShips: res })这会导致组件重新渲染并映射新数据。

进化部分1

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种子文件

• 从knexfile.js获取配置
• DB站起来读种子
• dbclassics 连接到Evo1表
• API端点提供数据