ReactJS：如何正确重置或处理来自 state 的数据

Question

我有这个工作，当用户进入这个页面时，这行代码执行：

interface Badge {
  id: string;
  badge_name: string;
  badge_description: string;
  img64: string;
}
    const [data, setData] = useState([] as any[]);
    const [isPending, setisPending] = useState(true);
    const [searchTerm, setSearchTerm] = useState("");

    const onSearchChange = (e: any) => {
        setSearchTerm(e.target.value);
      };

const setDataWithImg = useCallback(async (badges: Badge[]) => {
    let badgeWithImg: Badge[] = [];

    const base64Flag = "data:image/png;base64,";

    await Promise.all(
      badges.map(async (badge: any) => {

        const imgBuffer = badge.img_icon.data;
        const imgBase64 = bufferToBase64(imgBuffer);

        badge.imgBase64 = `${base64Flag}${imgBase64}`;

        badgeWithImg.push(badge);
      })
    );

    setData(badgeWithImg);
  }, []);
    
    const loadData = useCallback(async () => {
        console.log("loadData");
        try {
          setisPending(true);
          await BadgeService.loadData().then(
            (res) => {
              setDataWithImg(res.data);
              setisPending(false);
            },
            (error) => {
              setisPending(false);
            }
          );
        } catch (err) {
          console.log(err);
          setisPending(false);
        }
      }, [setDataWithImg]);
    
      useEffect(() => {
        loadData();
      }, [loadData]);

它将从BadgeService.loadData加载数据，我有这个 function 也将从 api 搜索数据，并且将执行此代码。

const onClickFilter = async (e: any) => {
    e.preventDefault();
    if (searchTerm === "") {
      loadData();
    } else {
      try {
        console.log("filterData");
        setisPending(true);
        await BadgeService.filterData({
          badge_name: searchTerm,
        }).then(
          (res) => {
            setDataWithImg(res.data);
            setisPending(false);
          },
          (error) => {
            setisPending(false);
          }
        );
      } catch (err) {
        console.log(err);
        setisPending(false);
      }
    }
  };

用户搜索 function 并且该代码将执行，搜索 function 工作正常，我希望当用户在搜索中单击具有空值的过滤器时，它将加载原始loadData 。 我已经尝试console.log('Loaddata')来跟踪我的情况是否正常并且没问题，但是当我检查 .network 时，它仍然执行来自filterData的api调用，而不是loadData

第一次加载页面：

当用户触发搜索 function 时：

用户触发搜索 function 但搜索词为空的地方：

基于.network日志：

最后一个请求应该只是徽章，而不是带参数。我该如何解决这个问题？ 我在这里错过了什么？

谢谢！

Answer 1

查看您的代码，您的 if 检查 onClickFilter function 似乎是错误的。

你可以做类似的事情

if(!searchTerm){
 loadData();
}

这样做，searchTerm 将为每个“虚假”值（空字符串、0、null、false、undefined.NaN）返回 true，而 x == "" 仅当 x 为 null（或显然未定义）时才返回 true。

请让我知道它是否有效。

Answer 2

通过这样做我可能会修复问题，

我的服务中有这段代码：

 const loadData = () => {
      config["params"] = {};
      return axios.get(API_URL + "api/v1/badges", config).then((response) => {
        //console.log("from loaddata..");
        //console.log("load data", response);
        return response;
      });
    };
    
        const filterData = (data: any) => {
          config["params"] = {
            s: data,
          };
          return axios.get(API_URL + "api/v1/badges", config).then((response) => {
            console.log("from filterdata..");
            console.log("filter data", response);
            return response;
          })

;

我刚刚添加了config["params"] = {}; 这行代码加载数据

谢谢你们！