.map() function 使用路由時不返回任何內容

Question

我正在嘗試使用react-router-dom創建一個多頁面 web 應用程序，但是當我嘗試創建用戶列表頁面 (userlist.js) 時， .map() function 沒有返回.map()中的任何內容.map() function，但是.map()行之前的最后一行工作正常，顯示<h1>沒有問題。

這是我的 App.js：

import './App.css';
import { useEffect, useState } from "react"
import axios from 'axios';
import React from "react"
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from "react-router-dom"
import Home from './home'
import Userlist from './userlist'

function App() {
  return (
    <body>
      <header>
        <div className="divheadertitle">
          <h1 className="headertitle">Tree.io</h1>
        </div>
        <Router>
          <nav>
            <ul>
              <li><Link to="/">Home</Link></li>
              <li><Link to="/userlist">User list</Link></li>
            </ul>
          </nav>

          <Routes>
           <Route path='/userlist' element={<Userlist />/>
           <Route path='/' element={<Home />/>
          </Routes>
        </Router>
      </header>
    </body>
  )
}

export default App;

這是我的 userlist.js：

import React from "react"
import axios from 'axios'
import { useState, useEffect } from "react"

function userlist() {
  const [listOfUsers, setListOfUsers] = useState([])

  useEffect(() => {
    axios.get('https://localhost:3001/userlist')
      .then((response) => {
        setListOfUsers(response.data)
      })
  }, [])

  return (
    <div className="userlistdiv">
      <h1>Lista de usuários:</h1>
      {listOfUsers.map((user) => {
        return (
          <div>
            <h1>Name: {user.name}</h1>  
            <h1>Age: {user.age}</h1>
            <h1>E-mail: {user.email}</h1>
          </div>
        )
      })}
    </div>
  );
}

export default userlist;

最后，我的后端文件 index.js：

const express = require('express');
const app = express();
const PORT = 3001;
const mongo = require('./mongo')
const usersModel = require('./models/userschema')
const cors = require('cors')
app.use(express.json())
app.use(cors())

app.get('/userlist', (req, res) => {
  usersModel.users.find({}).then((result, err) => {
    if (err) {
      res.json(err)
    } else {
      res.json(result)
    }
  })
})

app.get('/createUser', (req, res) => {
  const create = new usersModel.users({
    name: req.params.name,
    age: req.params.age,
    email: req.params.email
  })

  create.save()

  res.send('x')
})

app.listen(PORT, () => {
  console.log('Servidor rodando na porta ' + PORT);
})

Answer 1

您的路線需要稍微修改一下。 由於項目的根文件夾是每個 Route 組件路徑的一部分，我還建議對 Home 組件使用 exact 屬性，以確保您不會遇到任何問題。

<Route exact path='/' element={<Home />} />
<Route path='/userlist' element={<Userlist />} />

我看到 userlist 和 Userlist 都被使用了。 這將在 JavaScript 中產生問題。React 中的常見約定是始終對組件使用 PascalCase。 不過，您可以將 Link 中的 to 屬性和 Route 中的 path 屬性保留為小寫。 包括一些示例。

UserList.js
export UserList;
import UserList from './UserList';
function UserList { ... }
<div className='UserList'>...</div>

您可能會驗證您是否使用正確的協議進行調用。

axios.get('https://localhost:3001/userlist');

為避免編譯警告，請在 map 中為外部 div 設置一個鍵。您可以使用數據中的 id 屬性，或在每個條目中包含唯一值的任何其他屬性。

<div key={user.id}>...</div>

Answer 2

例如，您是否嘗試使用 console.log 調試listOfUsers的內容？ 嘗試將其放入 axios 響應中，就在調用setListOfUsers(response.data)之前。 看起來您的數組是空的，因為您的用戶列表服務器響應找不到任何用戶。 您的用戶模型是什么樣的？

或者也許只是嘗試在 PascalCase 中重命名您的組件：

function UserList() {
   ...
}

代替

function userlist() {
   ...
}

因為您的 useEffect 掛鈎可能根本沒有被調用，因為掛鈎只能從組件或掛鈎調用（即 function，PascalCase 名稱返回一個元素，或以 use 開頭的函數）

.map() function 使用路由時不返回任何內容

問題描述

2 個解決方案

解決方案1
0 2022-10-05 00:38:05

解決方案2
-2 2022-10-02 20:08:46

.map() function 使用路由時不返回任何內容

問題描述

2 個解決方案

解決方案1 0 2022-10-05 00:38:05

解決方案2 -2 2022-10-02 20:08:46

解決方案1
0 2022-10-05 00:38:05

解決方案2
-2 2022-10-02 20:08:46