嘗試在React中動態呈現MUI網格

我首先向 MongoDB 服務器發出請求以從資料庫中獲取資料，所有這些都是異步的，并在 App.js 中回傳一個 Promise。

然后我將它作為我的 Card.js 組件中的道具傳遞，并使用 .then() 獲取資料并將其推送到新陣列中。（我不確定這是否是最好的方法）

現在我正在嘗試使用 MUI 網格動態顯示資料中的名稱，我遇到了問題，因為它顯示資料在我的陣列中，但我在 UI 上沒有卡片。我究竟做錯了什么？

Card.js

import * as React from 'react';
import Grid from '@mui/material/Grid';
import RoomCard from './RoomCard'
import { useState } from 'react';

export default function Card({rooms}){
    const [loading, setLoading] = useState(false);
    let roomData = [];
    rooms.then(roomNames => { 
      roomNames.map(room => roomData.push(room)); 
    })
    console.log(roomData);
    
    return(<Grid container spacing={2}>
            {roomData.map(room => 
                <Grid item key={room} xs ={4}>
                  <RoomCard name = {room.name} />
                </Grid>
            )}
          </Grid>
    );

}

應用程式.js

import './App.css';
import Navbar from './components/NavBar';
import AddRoom from './components/AddRoom'
import RoomCard from './components/RoomCard'
import Grid from '@mui/material/Grid';
import Cards from './components/Cards'

function App() {
  let rooms = getRecords();
  return (
    <div className="App">
        <Navbar/>
        <AddRoom/>
        <Cards rooms = {rooms} />
    </div>
  );
}


async function getRecords() {
  const response = await fetch(`http://localhost:5000/room/`);

  if (!response.ok) {
    const message = `An error occured: ${response.statusText}`;
    window.alert(message);
    return;
  }

  const rooms = await response.json();
  
  return rooms;
}

export default App;

uj5u.com熱心網友回復：

在我看來，App.js 應該是 Card.js 的高階組件 (HOC)，以便 Card.js 可以輕松地為每個房間重復使用，因為您的代碼可能有它，App.js 應該包含加載控制器。你不能呼叫getRecords sync除非在async和await函式中，你可以在useEffect函式中使用它，因為你正在使用函式反應函陣列件，你的代碼現在應該是這樣的

import React,{useEffect,useState} from 'react'
import './App.css';
import Navbar from './components/NavBar';
import AddRoom from './components/AddRoom'
import RoomCard from './components/RoomCard'
import Grid from '@mui/material/Grid';
import Cards from './components/Cards'

function App() {
  const [loading,setLoading] useState(false);
  const [rooms, setRooms] useState([]);
  useEffect(()=>{
     async fetchRooms(){
        try{
            setLoading(true)
            const fetchedRooms = await getRecords();
            setRooms(fetchedRooms);
            setLoading(false)
        }catch{
          setLoading(false)
        }
     }

     fetchRooms();
     
  },[])// the empty array is used to pass value that will make this function to be called if they changed, since its empty this useffect only gets called when component is mounted
  
  return (
    <div className="App">
        { loading && (<p>loading.....</p>) }
        <Navbar/>
        <AddRoom/>
        <Cards rooms = {rooms} />
    </div>
  );
}


async function getRecords() {
  const response = await fetch(`http://localhost:5000/room/`);

  if (!response.ok) {
    const message = `An error occured: ${response.statusText}`;
    window.alert(message);
    return;
  }

  const rooms = await response.json();
  
  return rooms;
}

export default App;

在你的 card.js 里面你應該有這樣的東西

import * as React from 'react';
import Grid from '@mui/material/Grid';
import RoomCard from './RoomCard'
import { useState } from 'react';

export default function Card({rooms}){
   
    return(<Grid container spacing={2}>
            {rooms.map(room => 
                <Grid item key={room} xs ={4}>
                  <RoomCard name = {room.name} />
                </Grid>
            )}
          </Grid>
    );

}

這可以確保你的 card.js 是干凈的

標籤：

上一篇：將moment.jsobect與JSON回應中的時間戳進行比較

下一篇：js減少到對具有重復項的鍵的值進行分組