路由后useEffect不触发

Question

在使用 React Hooks、渲染和路由方面，我是一个新手。

App.js

function App() {
  return (
    <div className="App">
      <Navbar />
    </div>
  );  
}

Navbar.js

export default function Navbar() {
    return(
        <BrowserRouter>
            <Routes>
                <Route path = '/:page' element = {<Header/>} />
                <Route path='/' element={<Header/>} />

                <Route exact path='' element = {<Home/>}/>
                <Route exact path='home' element = {<Home/>}/>
                <Route exact path='players' element = {<BasicTable/>}/>
                <Route exact path='about' element = {<About/>}/>
                <Route path="*" element={<Home />} />
            </Routes>
        </BrowserRouter>
    )
}

BasicTable.js

const getObj = async () => {
    const value = await axios.get(...);
    return value;
}

export function BasicTable(){
    const [obj, setObj] = useState();

    console.log("getting object");
    useEffect (()=> {
        console.log("using Effect");
        setObj(getObj());
    }, []);

    //Rest of the code below this...
}

我试图让 axios get 调用在每次有人导航到基本 table 页面（/players 页面）时触发。如果我只是将 axios.get 调用裸插入到基本 table 函数中，这将导致 api get 调用的无限循环。现在我正在使用 useEffect 挂钩，但当我导航到“/players”时它永远不会触发。事实上，它永远不会触发。我唯一看到的是“获取对象”控制台日志，但从未“使用效果”。我是否遗漏了 useEffect 的一个重要部分？

Answer 1

useEffect 挂钩正在将 obj 状态更新为使用 setObj(getObj()); 隐式 returned Promise 对象。至少，useEffect 钩子需要等待 getObj 函数解析。这可以通过几种方式完成：

const getObj = async () => {
  const value = await axios.get(...);
  return value;
}

使用async/await:

export function BasicTable(){
  const [obj, setObj] = useState();

  console.log("getting object");
  useEffect (()=> {
    console.log("using Effect");

    const getObject = async () => {
      const obj = await getObj();
      setObj(obj);
    }
    
    getObject();
  }, []);

  // Rest of the code below this...
}

使用 Promise 链：

export function BasicTable(){
  const [obj, setObj] = useState();

  console.log("getting object");
  useEffect (()=> {
    console.log("using Effect");
    
    getObj().then(obj => setObj(obj));
  }, []);

  // Rest of the code below this...
}

事实上，因为 getObj 隐式地 return 是一个 Promise 对象，你可以简单地 return 来自 axios 的 Promise。

const getObj = () => {
  return axios.get(...);
}

路由后useEffect不触发

useEffect is not triggering after routing

javascript

reactjs

react-router

axios

react-hooks