React - Axios 获取请求将数据返回为 NULL

Posted 2023-03-28

【中文标题】React - Axios 获取请求将数据返回为 NULL

【英文标题】：React - Axios get request returns data as NULL

【发布时间】：2022-01-05 17:19:23

【问题描述】：

我正在尝试从我的后端 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));
    

控制器：

  @GetMapping("/perfume/id")
    @ResponseStatus(HttpStatus.OK)
        public Perfume getOnePerfume(@PathVariable int id) throws DoesNotExistException 
        return admin.getOnePerfume(id);

        

所以基本上在我的前端我有一个 CARD 组件和一个 Button 使用 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/>  />

注意： 使用打字稿 使用 React Router v6

我在这里错过了什么吗？

感谢您的帮助。

【参考方案1】：

可能是useEffect中缺少依赖数组，没有依赖数组，副作用函数运行每个组件渲染。