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

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 的数据，我也有此功能可以搜索来自 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);
      }
    }
  };

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

首次加载页面：

当用户启动搜索功能时：

用户触发搜索功能但搜索词为空：

基于网络日志：

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

谢谢！

Answer 1

查看您的代码，您的 if 检查 onClickFilter 函数似乎有误。

你可以这样做

if(!searchTerm){
 loadData();
}

对每个“虚假”值（空字符串、0、null、false、undefined、NaN）执行 !searchTerm 将 return 为真，而 x == "" 仅在以下情况下 return 为真x 为空（或显然未定义）。

如果有效请告诉我。

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"] = {}; 这行代码添加到 loadData

谢谢大家！

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

ReactJS: How to properly reset or handle data from state

javascript

typescript

reactjs

use-effect