Question

我想向 api 发出搜索请求。但我遇到的问题是每次 function f(...arguments) { console.log(arguments.length); if (arguments.length % 2 != 0) { for (let argument = 0; argument < arguments.length; argument++) { arg = arguments[argument]; if (isNaN(parseInt(arg))) { let num1 = parseFloat(arguments[argument - 1]); let num2 = parseFloat(arguments[argument + 1]); let equals = 0; switch (arg) { case "+": equals = num1 + num2; console.log(`Success!`); console.log(equals.toString()); break; case "-": equals = num1 - num2; console.log(`Success!`); console.log(equals.toString()); break; case "*": equals = num1 * num2; console.log(`Success!`); console.log(equals.toString()); break; case "/": equals = num1 / num2; console.log(`Success!`); console.log(equals.toString()); break; case "%": equals = num1 % num2; console.log(`Success!`); console.log(equals.toString()); break; default: console.log(`WOAH THERE BUCKO! You're only allowed to do single operations, do /calc help if you need help with the syntax.`); break; } } } } } f("3", "+", "7") 都会更新。 URLSearchParams 不更新。我的意思是它不是重新渲染。当我刷新页面时，我想发送具有更新值的请求。但我想在每次 searchKeyword 更新时重新渲染 searchKeyword。

value = new URLSearchParams(window.location.search).get("query")

Answer 1

您需要监听 window.location 的东西，一种选择是使用 useLocation 中的 react-router-dom 并使用 location 中的 useEffect 对象。

这将是基于您的代码的完整示例

import React, { useEffect, useState } from 'react';

const mockFetch = path => {
  return new Promise(res => {
    setTimeout(() => {
      console.log(path);
      res({
        path,
        data: [1, 2, 3]
      });
    }, 500);
  });
};

const useSearch = () => {
  const [search, setSearch] = React.useState(window.location.search);
  const listenToPopstate = () => {
    const searchPath = window.location.search;
    setSearch(searchPath);
  };
  React.useEffect(() => {
    window.addEventListener('popstate', listenToPopstate);
    return () => {
      window.removeEventListener('popstate', listenToPopstate);
    };
  }, []);
  return search;
};

export default function App() {
  const search = useSearch();
  const [songs, setSongs] = useState([]);

  useEffect(() => {
    let value = new URLSearchParams(search).get('query');
    const g = async () => {
      try {
        const data = await mockFetch(
          `http://127.0.0.1:8000/music/api/searchtrack/?search=${value}`
        );
        setSongs(data);
      } catch (err) {
        console.log(err);
      }
    };
    g();
  }, [search]);

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>{JSON.stringify(songs)}</p>
    </div>
  );
}

这个例子不是生产就绪的，要使其生产就绪：

看看是否可以将 useSearch 替换为您正在使用的第 3 方库（您是否使用路由器库），否则可以使用类似的东西。
向 get 请求添加可取消事件，以便在用户离开页面时不会触发 setSongs。

Answer 2

这是因为 useEffect 钩子只在依赖数组改变时渲染。你必须把这行放在 side use effect hook 中。

let value = new URLSearchParams(window.location.search).get("query")

当它的值发生变化时，反应状态不会更新

2 个答案: