[英]React - Axios get request returns data as NULL
我正在嘗試從我的后端 spring 項目發出獲取請求。 當我使用調用時,由於某種原因,我得到一個Null pointer exception
。 路徑似乎很好,當我在控制台上進行單元測試時它返回正確的值,但是,在通過 axios 調用時,我在控制台上get
此錯誤。
錯誤:
trace: "java.lang.NullPointerException\r\n\tat com.golden.scent.controllers.AdminController.getOnePerfume(AdminController.java:100)\r\n\tat java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)\r\n\tat java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)\r\n\tat java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)\r\n\tat java.base/java.lang.reflect.Method.invoke(Method.java:566)\r\n\tat org.springframework.web.method.support.InvocableHandlerMethod.doInvoke(InvocableHandlerMethod.java:205)\r\n\tat org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.java:150)\r\n\tat org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:117)\r\n\tat org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandlerMethod(RequestMappingHandlerAdapter.java:895)\r\n\tat org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:808)\r\n\tat org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:87)\r\n\tat org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1067)\r\n\tat org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:963)\r\n\tat org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1006)\r\n\tat org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:898)\r\n\tat javax.servlet.http.HttpServlet.service(HttpServlet.java:655)\r\n\tat org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:883)\r\n\tat javax.servlet.http.HttpServlet.service(HttpServlet.java:764)\r\n\tat org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:227)\r\n\tat org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:162)\r\n\tat org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53)\r\n\tat org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:189)\r\n\tat org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:162)\r\n\tat org.springframework.web.filter.RequestContextFilter.doFilterInternal(RequestContextFilter.java:100)\r\n\tat org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119)\r\n\tat org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:189)\r\n\tat org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:162)\r\n\tat org.springframework.web.filter.FormContentFilter.doFilterInternal(FormContentFilter.java:93)\r\n\tat org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119)\r\n\tat org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:189)\r\n\tat org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:162)\r\n\tat org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:201)\r\n\tat org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119)\r\n\tat org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:189)\r\n\tat org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:162)\r\n\tat com.golden.scent.filers.CORSFilter.doFilter(CORSFilter.java:41)\r\n\tat org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:189)\r\n\tat org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:162)\r\n\tat org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:197)\r\n\tat org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:97)\r\n\tat org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:540)\r\n\tat org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:135)\r\n\tat org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:92)\r\n\tat org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:78)\r\n\tat org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:357)\r\n\tat org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:382)\r\n\tat org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:65)\r\n\tat org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:895)\r\n\tat org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1722)\r\n\tat org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)\r\n\tat org.apache.tomcat.util.threads.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1191)\r\n\tat org.apache.tomcat.util.threads.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:659)\r\n\tat org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)\r\n\tat java.base/java.lang.Thread.run(Thread.java:829)\r\n"
后端服務:
@Override
public Perfume getOnePerfume(int id) throws DoesNotExistException {
return perfumeRepository.findById(id).orElseThrow(()-> new DoesNotExistException(id));
}
Controller:
@GetMapping("/perfume/{id}")
@ResponseStatus(HttpStatus.OK)
public Perfume getOnePerfume(@PathVariable int id) throws DoesNotExistException {
return admin.getOnePerfume(id);
}
所以基本上在我的前端我有一個帶有Button
的CARD
組件,它使用NavLink
導航到不同的組件。 我在路由上傳遞了一個 id 參數,並使用該param
在不同的組件上獲取它。
卡組件
{
state.map(c => (
<Grid item xs={4} sm={2} >
<PerfumeCard key={c.id} perfume={c} />
<button className="myButton2"> <NavLink
style={{ textDecoration: "none" }}
to={{
pathname: '/home/myperfume/' + c.id,
}}>
Click here for details
</NavLink></button>
</Grid>
))
}
如您所見,路徑為'/home/myperfume/' + c.id,
它將 URL 的 ID 屬性作為參數。 到目前為止,一切都很好。
卡片詳細信息組件:
function MyPerfume(): JSX.Element {
const [state, setState] = useState<any>('');
const params = useParams()
async function send() {
let response = null;
try {
const id = params.id;
console.log(id);
response = await axios.get<PerfumeModel>("http://localhost:8080/admin/perfume/" + id);
console.log(response.data);
setState(response.data);
store.dispatch(onePerfumesAction(response.data));
console.log(response)
} catch (err) {
alert(err)
}
}
useEffect(() => {
send();
});
return (
<div className="MyPerfume">
</div>
);
}
export default MyPerfume;
在這個組件上我有問題。 我使用useParams()
將 id 保存在 const 中。 現在我試圖通過 ID 從后端獲取特定項目的數據,但是,在嘗試執行此獲取請求時,我得到null pointer
異常,我不知道為什么,因為路徑似乎正確。
路由:
<Route path="/home/myperfume/:id" element={<MyPerfume/>} />
注意:使用 typescript 使用 React Router v6
我在這里錯過了什么嗎?
謝謝您的幫助。
可能,奇怪行為的原因是useEffect
中缺少依賴數組,沒有依賴數組,副作用 function 運行每個組件渲染。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.