使用React显示各条游轮的游轮清单

Question

此刻，我正在使用React在游轮上建立一个网站。

我已经了解了很多，但是现在我对如何显示基于特定巡航线路的船舶清单感到困惑。

请注意：这在“邮轮航线”页面上。

这是我的存储库（https://github.com/RobertWSON/Personal-ship-project/tree/practice-animation-react-slick）的链接，最新代码位于practice-animation-react-slick分支上

我在listofShips.jsx组件中使用了地图功能

This website example我发现没有使用react，而是显示基于特定巡航的船只。 我还想针对特定的邮轮路线扩展和折叠我的列表，我可以使用Accordian来做到这一点。

下面的代码是我在ListofShips组件中拥有的代码，但这仅适用于显示所有不需要的游轮。

import React from 'react'
import {Link} from 'react-router-dom'
import {getAllShips} from '../api/api'

class ListofShips extends React.Component {
    constructor(props){
      super(props)

      this.state = {
        shipList: []  
      }
      this.setUpShips = this.setUpShips.bind(this)
    }

    componentDidMount(){
      console.log('cdm')
      this.setUpShips()
    }

    setUpShips() {
      console.log('getallships')
      getAllShips()  
      .then(res =>{

        this.setState({
          shipList: res  

        })
      })
    }

    buildShipName(ship) {
      return ship.cruise_line ? (ship.cruise_line + ': ' + ship.ship_name) : ship.ship_name
    }

 render()  {
    return  (

     <React.Fragment>

           {this.state.shipList.map(ship => {

           return  <li className="shipsList" key={ship.cruise_line + '-' + ship.ship_name}><Link to={`/ship/${ship.id}`} >{this.buildShipName(ship)}</Link></li>

})}

       </React.Fragment>
      // </div>
    )
  } 


  }


export default ListofShips 

我的预期结果是获得特定邮轮的船只清单。 我还想为每条邮轮增加和折叠清单。

Answer 1

如果要将结果过滤到特定的巡航路线，最简单的解决方法是Array.prototype.filter方法。

// Copied from seeds/ships.js
const ships = [
  {
    id: 1,
    cruise_line: "Royal Caribbean",
    ship_name: "Symphony of the Seas",
    img: "/images/Symphone-of-the-Seas-heading-left-OU2.jpg",
    Year: 2018,
    Gross_Tonnage: 228081,
    Passenger_Full_Capacity: 6680,
    Double_Occupancy_Passenger_Capacity: 5518,
    Length: 362.1,
    Beam: 47.448,
    Draft: 9.322,
    Height: 72.5,
    Loaded_Displacement: 120000,
    Deadweight: 18095,
    Review: '' 
  },
  {
    id: 5,
    cruise_line: "Fred Olsen",
    ship_name: "Boudicca",
    img: "/imagwes/Boudicca_at_Funchal_2016_(bigger).jpg",
    Year: 1973,
    Gross_Tonnage: 28372,
    Passenger_Full_Capacity: 900,
    Double_Occupancy_Passenger_Capacity: 880,
    Length: 206.96,
    Beam: 25.22,
    Draft: 7.55,
    Height: 45,
    Loaded_Displacement: 21156,
    Deadweight: 5956,
    Review: '' 
  },
  {
    id: 6,
    cruise_line: "Fred Olsen",
    ship_name: "Black Watch",
    img: '',
    Year: 1972,
    Gross_Tonnage: 28613,
    Passenger_Full_Capacity: 868,
    Double_Occupancy_Passenger_Capacity: 804,
    Length: 205.47,
    Beam: 25.20,
    Draft: 7.55,
    Height: 45,
    Loaded_Displacement: 20704,
    Deadweight: 5656,
    Review: ''       
  },
];

// "Royal Caribbean" only
const shipsOne = ships.filter(ship => ship.cruise_line === 'Royal Caribbean');

// "Fred Olsed" only
const shipsTwo = ships.filter(ship => ship.cruise_line === 'Fred Olsen');

console.log(shipsOne); // Ship with ID 1
console.log(shipsTwo); // Ships with ID 5, 6

如果您想按邮轮对船只进行分组，最好的选择是Array.prototype.reduce方法。

// Copied from seeds/ships.js
const ships = [
  {
    id: 1,
    cruise_line: "Royal Caribbean",
    ship_name: "Symphony of the Seas",
    img: "/images/Symphone-of-the-Seas-heading-left-OU2.jpg",
    Year: 2018,
    Gross_Tonnage: 228081,
    Passenger_Full_Capacity: 6680,
    Double_Occupancy_Passenger_Capacity: 5518,
    Length: 362.1,
    Beam: 47.448,
    Draft: 9.322,
    Height: 72.5,
    Loaded_Displacement: 120000,
    Deadweight: 18095,
    Review: '' 
  },
  {
    id: 5,
    cruise_line: "Fred Olsen",
    ship_name: "Boudicca",
    img: "/imagwes/Boudicca_at_Funchal_2016_(bigger).jpg",
    Year: 1973,
    Gross_Tonnage: 28372,
    Passenger_Full_Capacity: 900,
    Double_Occupancy_Passenger_Capacity: 880,
    Length: 206.96,
    Beam: 25.22,
    Draft: 7.55,
    Height: 45,
    Loaded_Displacement: 21156,
    Deadweight: 5956,
    Review: '' 
  },
  {
    id: 6,
    cruise_line: "Fred Olsen",
    ship_name: "Black Watch",
    img: '',
    Year: 1972,
    Gross_Tonnage: 28613,
    Passenger_Full_Capacity: 868,
    Double_Occupancy_Passenger_Capacity: 804,
    Length: 205.47,
    Beam: 25.20,
    Draft: 7.55,
    Height: 45,
    Loaded_Displacement: 20704,
    Deadweight: 5656,
    Review: ''       
  },
];

const groupedShips = ships.reduce((acc, cur) => {
  const currentCruiseLine = cur.cruise_line;
  
  if (acc[currentCruiseLine]) {
    return {
      ...acc,
      [currentCruiseLine]: [...acc[currentCruiseLine], cur],
    };
  }
  
  return {
    ...acc,
    [currentCruiseLine]: [cur],
  };
}, {});

console.log(groupedShips);