無法讓 map 在反應頁面上呈現

Question

我試圖渲染一個對象列表，當我在控制台上嘗試 map 時，它會正確返回信息，我只需要在列表中渲染 object 名稱，但每次我重新加載屏幕上都沒有渲染，我不知道我是什么做錯了。

 import React from "react"; import { useState } from 'react' import Swal from 'sweetalert2' import AuthService from "../services/auth.service"; import { FcInfo } from 'react-icons/fc' import { AiFillEdit } from 'react-icons/ai' import { FiDelete } from 'react-icons/fi' import { Card, InputGroup, FormControl, Button, DropdownButton, Dropdown,Table} from 'react-bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; import '../auth/login.css' import solicitudeService from "../services/solicitude.service"; import edificeService from "../services/edifice.service"; import { render } from "@testing-library/react"; function MySolicitudes(){ var data=[] solicitudeService.getAll().then(response =>{ data=response.data data.map((val, key)=>{ console.log("TEST:",val.nombresolicitud,key); }); console.log(data); }).catch(e=>{ console.log(e); }); return( <div className="container"> <h3>Lista Espacios</h3> <ul className="list-group"> {data && data.map((val,index) =>{ return( <li key={index}> {val.nombresolicitud} </li>); }) } </ul> </div> ); } export default MySolicitudes;

Answer 1

問題是data不是組件的 state 的一部分，因此重新分配它不會觸發重新渲染。

此外，您的代碼當前將在每次渲染時調用solicitudeService.getAll() ，這可能是您不想要的。

嘗試使用useEffect和useState鈎子：

const [data, setData] = useState([])
useEffect(() => {
    solicitudeService.getAll().then(response =>{
        setData(response.data);
        console.log(data);
    }).catch(e=>{
        console.log(e);
    });
}, []);

這將在組件最初渲染時調用一次solicitudeService.getAll() ，然后調用setData觸發重新渲染並為您提供您期望的行為。

如果您想在調用 solicitudeService.getAll solicitudeService.getAll()時進行更改，您可以調整 deps 數組的useEffect 。

Answer 2

data在此處不是 state 變量，因此不會執行視圖的重新呈現（您通過 solicitudeService 加載的數據不是同步的，因此在頁面呈現時數據不存在）。

將數據放入useState鈎子中，並在 youre solicitudeService 中調用 setter。

就像是：

const [data, setData] = useState()

solicitudeService.getAll().then(response =>{
        setData(response.data)
    }).catch(e=>{
        console.log(e);
});