我想獲取數據並將其顯示在反應頁面中

Question

我是 reactjs 的新手，我想在反應頁面中從我的數據庫表中獲取和顯示數據，我按照教程編寫了一個代碼，但我不知道如何更正它。 這是數據：

這是我正在寫的代碼

 import React, { useEffect, useState } from 'react'; import axios from 'axios'; function Companies() { const [companies, setCompanies] = useState(initialState: []) useEffect( effect: () => { companydata() }, deps: []) const companydata = async () => { const {data}= await axios.get("http://localhost:5000/api/v1/companies"); setCompanies(data); } return ( <div className="companies"> {companies.map(companies => ( <div key={companies.CompanyId}> <h5>{companies.CompanyName}</h5> </div> ))} </div> ); } export default Companies;

Answer 1

useEffect( effect: async () => {
      await companydata()
      },   deps: [])

您是否嘗試過在 useEffect 掛鈎中添加async和await

Answer 2

嘗試像這樣更改您的代碼：

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

function Companies() {
  const [companies, setCompanies] = useState([]);

  useEffect(() => {
    companydata();
  }, []);

  const companydata = async () => {
    const { data } = await axios.get('http://localhost:5000/api/v1/companies');
    setCompanies(data);
  };

  return (
    <div className='companies'>
      {companies.map((comp) => (
        <div key={comp.CompanyId}>
          <h5>{comp.CompanyName}</h5>
        </div>
      ))}
    </div>
  );
}

export default Companies;