尝试使用React Router useSearchParams对数据进行排序时尚未完成的React使用效果尚未完成

Question

我有一个React组件，可以尝试先从TMDB API加载电影。然后，我创建一个使用查询参数对电影进行分类的按钮。我想使用查询参数，因为我想保留URL，以便我可以与排序值共享URL。 （这也是出于我的学习目的）。

当页面已经渲染并单击按钮时，它可以正常工作。

但是，当我尝试使用查询参数重新加载页面时，查询参数使用效果在电影完成之前先运行。

这是我的代码：

import { Box, Button } from '@mui/material';
import { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';

import tmdb from '../apis/tmdb';
import MovieCard from '../components/MovieCard';

const MovieList = () => {
    const [queryParams, setQueryParams] = useSearchParams();
    const [movies, setMovies] = useState([]);

    useEffect(() => {
        const fetchMovies = async () => {
            try {
                const fetchedMovies = await tmdb.get("trending/movie/week");
                setMovies(fetchedMovies.data.results);
            } catch (error) {
                console.log(error);
            }
        }

        fetchMovies();
    }, []);

    useEffect(() => {
        const sortMovies = (type) => {
            if (type === 'asc') {
                const sorted = movies.sort((a, b) => a.vote_average - b.vote_average);
                setMovies(sorted);
            }
            if (type === 'desc') {
                const sorted = movies.sort((a, b) => b.vote_average - a.vote_average);
                setMovies(sorted);
            }
        }

        sortMovies(queryParams.get('sort'));
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [queryParams]);

    const setSortParam = (type) => {
        queryParams.set("sort", type);
        setQueryParams(queryParams);
    }

    return (
        <Box sx={{
            display: 'flex',
            flexDirection: 'column',
            mt: 5,
        }}>
            <Box sx={{
                mt: 5,
                display: 'flex',
                flexDirection: 'row',
                justifyContent: 'flex-end',
                alignItems: 'center',
            }}>
                Sort by Rating
                <Button
                    variant="contained"
                    sx={{ ml: 2 }}
                    onClick={() => setSortParam("asc")}
                >
                    Asc
                </Button>
                <Button
                    variant="contained"
                    sx={{ ml: 2, mr: 2 }}
                    onClick={() => setSortParam("desc")}
                >
                    Desc
                </Button>
            </Box>
            <Box sx={{
                display: 'flex',
                flexDirection: 'row',
                flexWrap: 'wrap',
                justifyContent: 'space-between',
            }}>
                {
                    movies.map(movie => (
                        <MovieCard key={movie.title} movie={movie}></MovieCard>
                    ))
                }
            </Box>
        </Box>
    );
}

export default MovieList;

我尝试创建新状态以跟踪电影长度＆gt; 0，但有时是越野车。我还尝试让USEREF跟踪电影长度＆gt; 0但是它不起作用。

无论如何，是否可以等待首先使用效果完成？还是我应该使用其他方法来读取查询参数和排序？

Answer 1

我认为您正在尝试合并电影状态（ ie真实）与派生状态（ ie电影的排序顺序）） 。派生状态通常不属于状态。您可以轻松地从电影状态和当前sort querystring参数值中得出排序的电影数组。

示例：

import { Box, Button } from "@mui/material";
import { useEffect, useState } from "react";
import { useSearchParams } from "react-router-dom";

import tmdb from "../apis/tmdb";
import MovieCard from "../components/MovieCard";

// Sort comparators
const sortVoteAverageAsc = (a, b) => a.vote_average - b.vote_average;
const sortVoteAverageDesc = (a, b) => sortVoteAverageAsc(b, a);

// Sorting utility function
const sortVoteAverage = (sort = "asc") =>
  sort === 'asc' ? sortVoteAverageAsc : sortVoteAverageDesc;

const MovieList = () => {
  const [queryParams, setQueryParams] = useSearchParams();
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    const fetchMovies = async () => {
      try {
        const fetchedMovies = await tmdb.get("trending/movie/week");
        setMovies(fetchedMovies.data.results);
      } catch (error) {
        console.log(error);
      }
    };

    fetchMovies();
  }, []);

  const setSortParam = (type) => {
    queryParams.set("sort", type);
    setQueryParams(queryParams);
  };

  // create shallow copy of movies state, then sort by sort query parameter
  const sortedMovies = movies
    .slice()
    .sort(sortVoteAverage(queryParams.get("sort")));

  return (
    <Box
      ...
    >
      <Box
        ...
      >
        Sort by Rating
        <Button
          variant="contained"
          sx={{ ml: 2 }}
          onClick={() => setSortParam("asc")}
        >
          Asc
        </Button>
        <Button
          variant="contained"
          sx={{ ml: 2, mr: 2 }}
          onClick={() => setSortParam("desc")}
        >
          Desc
        </Button>
      </Box>
      <Box
        sx={{
          display: "flex",
          flexDirection: "row",
          flexWrap: "wrap",
          justifyContent: "space-between"
        }}
      >
        {sortedMovies.map((movie) => (
          <MovieCard key={movie.title} movie={movie} />
        ))}
      </Box>
    </Box>
  );
};

如果需要，您可以使用usememo hook nock 值 hook nock nock，依赖于电影状态>状态和当前sot querystring参数值。

例子：

const sort = queryParams.get("sort");

const sortedMovies = useMemo(() => {
  return movies
    .slice()
    .sort(sortVoteAverage(sort))
}, [movies, sort]);

Answer 2

我认为您需要一个州来跟踪电影是否已加载

const [moviesHasLoaded, setMoviesHasLoaded] = useState(false);

useEffect(() => {
    const fetchMovies = async () => {
        try {
            const fetchedMovies = await tmdb.get("trending/movie/week");
            setMovies(fetchedMovies.data.results);
            setMoviesHasLoaded(true);
        } catch (error) {
            console.log(error);
        }
    }

    fetchMovies();
}, []);

useEffect(() => {
    if (!moviesHasLoaded) return;
    const sortMovies = (type) => {
        if (type === 'asc') {
            const sorted = movies.sort((a, b) => a.vote_average - b.vote_average);
            setMovies(sorted);
        }
        if (type === 'desc') {
            const sorted = movies.sort((a, b) => b.vote_average - a.vote_average);
            setMovies(sorted);
        }
    }

    sortMovies(queryParams.get('sort'));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [queryParams, moviesHasLoaded]);