useLocation 无法识别处于状态的 JSON 对象

Question

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

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

请检查此 link 了解我的意思。

Screenshot of console log output of result when accessed from 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>

从 'quiz' 导航到“/results”，将结果（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);
      }, [])

API 在调用 toResults() 的地方调用：

   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
    });
}

useLocation 无法识别处于状态的 JSON 对象

useLocation doesn't recognize JSON object in state

javascript

json

reactjs

react-router

react-router-dom

问题

解决方案