Использование React для отображения списка круизных судов по круизной линии

Question

В настоящее время я работаю над сайтом круизных лайнеров с использованием React.

Я дошел до этого далеко, но теперь я озадачен тем, как показать Список кораблей на основе определенных круизных линий..

Примечание: это на странице круизных линий.

Вот ссылка на мой репозиторий (https://github.com/RobertWSON/Personal-ship-project/tree/practice-animation-react-slick), а актуальный код находится на practice-animation-react-slick ветви

Я использовал функцию карты в listofShips.jsx компонент

Этот пример веб-сайта Я обнаружил, что не использует реакцию, но показывает корабли, основанные на конкретном круизе. Я также хочучтобы мой список расширился и свернулся для определенных круизных линий, и я мог бы использовать для этого 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);