useLocation 无法识别状态中的 JSON 对象

Question

我一直在尝试使用 react-router-dom 中的 useNavigate() 和 useLocation() 将 JSON 对象从一个组件传递到另一个组件。 我尝试了各种方法来执行此操作，遵循this和this 。 问题是，我在单击按钮后触发的异步函数中调用 navigate()，因此我无法使用我想象的 Link 组件。

它的工作原理是，一旦单击提交按钮，它就会触发 API 调用。 理想情况下，一旦接收到 JSON 对象，就会调用 navigate()，将 JSON 对象传递给下一个组件。 但是，我不断收到“null”或空对象。

请检查此链接以了解我的意思。

从 useLocation 访问时结果的控制台日志输出截图

---

App.JS 路线：

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/start/:id" element={<Start/>} />
    <Route path="/quiz/:id" element={<Quiz/>} />
    <Route path="/results" element={<Results />} />
  </Routes>
</BrowserRouter>

从“测验”导航到“/结果”，将结果（JSON 对象）传递到：

import { useLocation } from "react-router-dom";

...

 const toResults=()=>{
      console.log(results); // *Properly displays JSON object in console)*
      navigate('/results', {state: results});
    }

---

从“/results”访问 JSON（不工作）：

import { useLocation } from "react-router-dom";

...

const { state } = useLocation();
    
      useEffect(() => {
        console.log("Results from results page: ");
        console.log(state);
      }, [])

---

调用 toResults() 的 API 调用：

   async function submitQuiz(event){ 
   event.preventDefault();
   console.log(id);
   console.log(answer);

   //Post request passes question ID and student answer to server.
   const response = await fetch('http://localhost:3001/api/quiz', {
    
       method: 'POST',
       headers:{
          'Content-Type': 'application/json' ,
          'Accept': 'application/json' 
       },
       body: JSON.stringify({
           id,
           answer
       })  
   } ) .then(response => response.json())
   .then(data => {
     console.log(data);
     setResults(data);
     toResults();
    });
  }

我将不胜感激有关如何从 useLocation 正确访问数据的任何指导，或者是否有更有效的方法来完成此操作。

谢谢！

Answer 1

问题

这里的问题是results是您的 React 状态，并且排队的 React 状态更新不会立即处理。

.then(data => {
  console.log(data);
  setResults(data); // <-- enqueued state update
  toResults();      // <-- uses current `results` state
});

...

const toResults=()=>{
  console.log(results); // <-- not updated state yet
  navigate('/results', {state: results});
}

解决方案

您很可能根本不需要result状态。 由于您正在远离此组件，因此无论如何都会对状态进行垃圾收集。 只需使用响应数据发出命令式导航请求。

例子：

async function submitQuiz(event){ 
  event.preventDefault();
  console.log(id);
  console.log(answer);

  //Post request passes question ID and student answer to server.
  const response = await fetch(
    'http://localhost:3001/api/quiz',
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json' ,
        'Accept': 'application/json' 
      },
      body: JSON.stringify({
        id,
        answer
      })  
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
      navigate('/results', { state: data }); // <-- navigate with result here
    });
}