为什么不是按排序顺序渲染的数据

Question

为什么不按排序顺序渲染的数据

我将游乐设施作为近乎； 。

但是，为什么分类器未排序呢？

排序之前是否会呈现排序？如果是这样，我该如何在渲染之前对乘车进行排序？

Rides.js

import { useEffect, useState } from "react";
import Navbar from "./Navbar";
import NearestRides from "./NearestRides";

const Rides = () => {
  const [rides, setRides] = useState([]);
  const [user, setUser] = useState({});


  useEffect(() => {
    const fetchRides = async () => {
      const data = await fetch('https://assessment.api.vweb.app/rides');
      const json = await data.json();
      setRides(json);
    }

    const fetchUser = async () => {
      const data = await fetch('https://assessment.api.vweb.app/user');

      const json = await data.json();
      console.log(json);
      setUser(json);
    }
    
    const makeNetworkCalls = async() => {
      await fetchRides();
      await fetchUser();
    }

    makeNetworkCalls().catch((e) => {
      console.log(e);
    })

  }, [])

  useEffect(() => {
    const calculateDistance = async(path, user_station) => {
      let min = Math.abs(user_station - path[0]);
      for(let i = 0; i<path.length; i++){
        if(path[i] === user_station){
          return 0;
        }
        if(Math.abs(path[i] - user_station) < min){
          min = Math.abs(path[i] - user_station);
        }
      }
      return min;
    }

    const updaterides = async () => {
      rides.map(async (ride) => {
        ride.distance = await calculateDistance(
          ride.station_path,
          user.station_code
        );
      });
    };

    if (rides?.length > 0) {
      updaterides().catch((e) => {
        console.log(e);
      });
    }
  }, [rides,user]);

  return (
    <div>
      <Navbar user = {user}/>
      <div className="home">
        <NearestRides rides = {rides}/>
      </div>
    </div>
  );

}

export default Rides;

newStrides.js

import { useEffect, useState } from "react";

const NearestRides = ({rides}) => {
  const [sortedRides, setSortedRides] = useState([]);

  useEffect(() => {
    const sortRides = async() => {
      const sorted = await rides.sort((ride1,ride2) => {
        return ride1.distance > ride2.distance ? 1 : -1;
      })

      setSortedRides(sorted);
    }

    sortRides().catch((e) => console.log(e));

  }, [rides]);

  return(
    <div className="rides">
      {console.log(sortedRides)}
      {sortedRides?.map((ride) => {
        return (
          <div className="ride-detail">
          <img src={ride.map_url} alt="Ride_map" />
          <div>
            <p>Ride Id : {ride.id}</p>
            <p>Origin Station : {ride.origin_station_code}</p>
            <p>Station Path : {ride.station_path}</p>
            <p>Date : {ride.date}</p>
            <p>Distance : {ride.distance}</p>
          </div>
        </div>
        )
      })}
    </div>
  )
}

export default NearestRides;

Answer 1

看起来像是在计算距离并将距离属性添加到R​​ides数组中时，您实际上并未再次将其设置为rides使用setrides 。

因此，距离绝不是Rides数组中的一部分。 。

但是，将乘车设置为使用DEPS的使用效应将产生无限环路。

因此，建议在没有deps的情况下计算使用效果的距离 - 即在您获取骑行后立即。