页面显示“没有可用数据”，尽管我在React中获取到了用户列表。

huangapple
go评论112阅读模式
英文:

Page says 'No data available' even though I am getting user lists in react

问题

问题：

当我在登陆页面点击“查看用户”按钮时，它会将我带到查看页面，我想要在那里呈现用户列表。但是它显示“无可用数据”。

代码：

登陆页面：

  1. import React, { useState, useEffect } from 'react';
  2. import axios from 'axios';
  3. import '../../src/App.css';
  4. import { Button } from '@mui/material';
  5. import { useNavigate } from 'react-router-dom';
  7. const LandingPage = () => {
  8.     const [alertShown, setAlertShown] = useState(false);
  10.     useEffect(() => {
  11.         if (!alertShown) {
  12.             alert("You've successfully logged in!");
  13.             setAlertShown(true);
  14.         }
  15.     }, [alertShown]);
  17.     const navigate = useNavigate();
  19.     const handleRedirectToView = () => {
  20.         navigate('/view');
  21.     };
  23.     return (
  24.         <div
  25.             style={{
  26.                 backgroundImage: 'url("https://milonelawoffice.com/wp-content/uploads/2016/08/slide3.jpg")',
  27.                 width: 1280,
  28.                 height: 609,
  29.                 backgroundSize: 'cover',
  30.                 backgroundRepeat: 'no-repeat',
  31.                 paddingTop: 80
  32.             }}
  33.         >
  34.             <headingText style={{ fontSize: "40px", textAlign: "center" }}>Welcome to the Dashboard!</headingText>
  35.             <br></br>
  36.             <center>
  37.                 <Button onClick={handleRedirectToView} variant="contained" sx={{ backgroundColor: '#C1C8EB', color: '#0C142C' }}>View Users</Button>
  38.             </center>
  39.         </div>
  40.     );
  41. };
  43. export default LandingPage;

查看页面：

  1. import React, { useState, useEffect } from 'react';
  2. import '../../src/App.css';
  4. const View = () => {
  5.     const [data, setData] = useState([]);
  7.     useEffect(() => {
  8.       fetch("http://localhost:4000/getUser", {
  9.         method: "GET",
  10.       })
  11.       .then((res) => res.json())
  12.       .then((data) => {
  13.         setData(data.data);
  14.       });
  15.     },[]);
  17.     return(
  18.         <div>
  19.             {data && data.length > 0 ? (
  20.                 <table>
  21.                     <thead>
  22.                         <tr>
  23.                             <th>Email</th>
  24.                             <th>Password</th>
  25.                         </tr>
  26.                     </thead>
  27.                     <tbody>
  28.                         {data.map(i => (
  29.                             <tr key={i.email}>
  30.                                 <td>{i.email}</td>
  31.                                 <td>{i.password}</td>
  32.                             </tr>
  33.                         ))}
  34.                     </tbody>
  35.                 </table>
  36.             ) : (
  37.                 <p>No data available</p>
  38.             )}
  39.         </div>
  40.     )
  41. };
  43. export default View;

我尝试获取用户列表。

我期望它在屏幕上呈现。

但是我得到的只是在浏览器控制台中显示为JSON数组的用户列表。

英文:

I am a beginner in MERN stack. I am just stuck at one place and it has been hours I cant solve it.

Issue:

When I press view users button in landing page, it takes me to view page where I want to render user lists. But it says No data available.
Error

CODE:

Landing Page:

  1. import React, { useState, useEffect } from &#39;react&#39;;
  2. import axios from &#39;axios&#39;;
  3. import &#39;../../src/App.css&#39;;
  4. import { Button } from &#39;@mui/material&#39;;
  5. import { useNavigate } from &#39;react-router-dom&#39;;
  7. const LandingPage = () =&gt; {
  8.     const [alertShown, setAlertShown] = useState(false);
  10.     useEffect(() =&gt; {
  11.         if (!alertShown) {
  12.             alert(&quot;You&#39;ve successfully logged in!&quot;);
  13.             setAlertShown(true);
  14.         }
  15.     }, [alertShown]);
  18.     const navigate = useNavigate();
  20.     const handleRedirectToView = () =&gt; {
  21.         navigate(&#39;/view&#39;);
  22.     };
  24.     return (
  25.         &lt;div
  26.             style={{
  27.                 backgroundImage: &#39;url(&quot;https://milonelawoffice.com/wp-content/uploads/2016/08/slide3.jpg&quot;)&#39;,
  28.                 width: 1280,
  29.                 height: 609,
  30.                 backgroundSize: &#39;cover&#39;,
  31.                 backgroundRepeat: &#39;no-repeat&#39;,
  32.                 paddingTop: 80
  33.             }}
  34.         &gt;
  35.             &lt;headingText style={{ fontSize: &quot;40px&quot;, textAlign: &quot;center&quot; }}&gt;Welcome to the Dashboard!&lt;/headingText&gt;
  36.             &lt;br&gt;&lt;/br&gt;
  37.             &lt;center&gt;
  38.                 &lt;Button onClick={handleRedirectToView} variant=&quot;contained&quot; sx={{ backgroundColor: &#39;#C1C8EB&#39;, color: &#39;#0C142C&#39; }}&gt;View Users&lt;/Button&gt;
  39.             &lt;/center&gt;
  40.         &lt;/div&gt;
  41.     );
  42. };
  44. export default LandingPage;

View page:

  1. import React, { useState, useEffect } from &#39;react&#39;;
  2. import &#39;../../src/App.css&#39;;
  4. const View = () =&gt; {
  5.     const [data, setData] = useState([]);
  7.     useEffect(() =&gt; {
  8.       fetch(&quot;http://localhost:4000/getUser&quot;, {
  9.         method: &quot;GET&quot;,
  10.       })
  11.       .then((res) =&gt; res.json())
  12.       .then((data) =&gt; {
  13.         setData(data.data);
  14.       });
  15.     },[]);
  17.     return(
  18.         &lt;div&gt;
  19.             {data &amp;&amp; data.length &gt; 0 ? (
  20.                 &lt;table&gt;
  21.                     &lt;thead&gt;
  22.                         &lt;tr&gt;
  23.                             &lt;th&gt;Email&lt;/th&gt;
  24.                             &lt;th&gt;Password&lt;/th&gt;
  25.                         &lt;/tr&gt;
  26.                     &lt;/thead&gt;
  27.                     &lt;tbody&gt;
  28.                         {data.map(i =&gt; (
  29.                             &lt;tr key={i.email}&gt;
  30.                                 &lt;td&gt;{i.email}&lt;/td&gt;
  31.                                 &lt;td&gt;{i.password}&lt;/td&gt;
  32.                             &lt;/tr&gt;
  33.                         ))}
  34.                     &lt;/tbody&gt;
  35.                 &lt;/table&gt;
  36.             ) : (
  37.                 &lt;p&gt;No data available&lt;/p&gt;
  38.             )}
  39.         &lt;/div&gt;
  40.     )
  42. };
  44. export default View;

I tried to get list of users.

I was expecting it to be rendered on screen.

But all I got was lists of users showing as array in JSON inside console of browser.

答案1

得分: 1

尝试控制台输出 data，我认为状态 data 没有正确设置。

  1. useEffect(() => {
  2.   fetch("http://localhost:4000/getUser") // 在这种情况下不需要设置方法，因为默认是 Get。
  3.   .then((res) => res.json())
  4.   .then((data) => {
  5.     setData(data); // 仅用户数组
  6.   });
  7. }, []);
英文:

Try to console data, i think that the state data is not set properly.

  1. useEffect(() =&gt; {
  2.   fetch(&quot;http://localhost:4000/getUser&quot;) //there is no need for setting the method in this case because it&#39;s by default Get.
  3.   .then((res) =&gt; res.json())
  4.   .then((data) =&gt; {
  5.     setData(data); //just the array of users
  6.   });
  7. },[]);

答案2

得分: 1

我可以尝试帮助您解答一个问题和提供两个提示：

问题：您确定data.data存在吗？ setData(data.data); 如果我没记错的话，应该是这个响应结构：

  1. data: {
  2.   data: {}
  3. }

也许这是导致您的代码出现问题的原因。

提示：

  1. 使用 console.log(data) 来检查数据是否被存储在状态中。（应该在return()之前和useEffect之后使用）
  2. 创建一个带有应用 try catch 的fetch方法的辅助文件。
    您可以在这里找到一些示例和更多信息：https://ilikekillnerds.com/2023/02/handling-errors-with-the-fetch-api/。
英文:

I can try to help you with one question and two tips:

Q: Are you sure that data.data exists? setData(data.data); This should be the response structure if I'm not wrong:

  1. data: {
  2.   data: {}
  3. }

Maybe that's what's breaking your code.

Tips:

  1. Use console.log(data) so you can check if data is being stored on state. (Should be before return() and after useEffect)
  2. Create a helper file with fetch method applying try catch.
    Here you'll find some examples and more information about it.
    <https://ilikekillnerds.com/2023/02/handling-errors-with-the-fetch-api/>

huangapple
  • 本文由 发表于 2023年6月12日 05:25:42
  • 转载请务必保留本文链接：https://go.coder-hub.com/76452566.html
  • javascript
  • mern
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定