如何修复Axios搜索方法中的Toast通知异常问题？

问题出在React的状态更新是异步的：你在调用setMovies(res.results)后立刻判断movies.length，此时movies还是更新前的旧状态值，所以会错误触发Toast。

修改方案：

• 直接用接口返回的res.results的长度来判断是否无结果，而不是依赖还没更新的movies状态
• 增加请求错误处理，避免加载状态一直挂着

修改后的完整代码：

import React, { useState } from "react";
import axios from "axios";
import { API_KEY } from "../../utils/api";
import MovieItem from "../../components/MovieItem/MovieItem";
import { Button, Input, Form } from "antd";
import "antd/dist/antd.min.css";
import "./Search.scss";
import Loader from "../../components/Loader/Loader";
import { toast } from "react-toastify";

const Search = () => {
  const [movies, setMovies] = useState([]);
  const [searchTerm, setSearchTerm] = useState("");
  const [loading, setLoading] = useState(false);

  const fetchSearch = () => {
    setLoading(true);
    axios
      .get(
        `https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&language=en-US&query=${searchTerm}&page=1&include_adult=false`
      )
      .then((res) => res.data)
      .then((res) => {
        setLoading(false);
        if (!res.errors) {
          setMovies(res.results);
          // 直接用接口返回的结果长度判断
          if (res.results.length === 0) {
            toast("Movies doesn't find");
          }
          setSearchTerm("");
        } else {
          setMovies([]);
          toast("Movies doesn't find");
        }
      })
      // 增加请求失败处理
      .catch((err) => {
        setLoading(false);
        setMovies([]);
        toast("Failed to fetch movies");
      });
  };

  const handleChange = (e) => {
    setSearchTerm(e.target.value);
  };

  return (
    <>
      <div className="search">
        <div className="container">
          <div className="row">
            <div className="col-lg-12 mb-3 mt-3">
              <h2>Suggest me</h2>
            </div>
            <Form onFinish={fetchSearch}>
              <Form.Item>
                <Input
                  value={searchTerm}
                  onChange={handleChange}
                  placeholder="Search Movies"
                />
              </Form.Item>
              <Button htmlType="submit">Search</Button>
            </Form>
          </div>
        </div>
      </div>

      <div className="movies">
        <div className="container-fluid">
          <div className="row">
            {loading ? (
              <Loader />
            ) : (
              movies?.map((movie, index) => (
                <div className="col-lg-3 p-3" key={index}>
                  <MovieItem movie={movie} page="top_Rated" />
                </div>
              ))
            )}
          </div>
        </div>
      </div>
    </>
  );
};

export default Search;

关键修改点：

1. 将判断条件从movies.length === 0改为res.results.length === 0，直接使用接口返回的最新数据
2. 在else分支（接口返回错误）也添加Toast提示，保证无结果或出错时都能通知用户
3. 增加catch块处理请求失败的情况，重置加载状态并提示错误
4. 调整setLoading(false)的位置，确保无论请求成功或失败都能关闭加载状态

内容的提问来源于stack exchange，提问作者Pasha