使用 react 和 axios 從 mongodb 獲取數據

Question

早上好。 我昨天一直在嘗試從我的 mongodb 中獲取數據。 但是，通過上面的代碼，我在控制台中得到了 json 但不可能將 json 放在 state 內？ 你能幫我..謝謝你所有的回答：:)

 import React, { useState, useEffect } from 'react' import axios from "axios" function CreateUser() { const [users, setUsers] = useState([]); const [countries, setCountries] = useState([]); useEffect(() => { const fecthData = async () => { await axios.get("http://localhost:4000/api/users").then(res => { setCountries(res.data); console.log(countries); }); }; fecthData(); }, []); return ( <div className="row"> <div className="col-md-4"> from user </div> <div className="col-md-8"> <ul className="list-group"> {countries.map((country, index) => <li key={index}>{country.name}</li>)} </ul> </div> </div> ) } export default CreateUser /* const fecthData = async () => { const res = await axios.get("http://localhost:4000/api/users"); setUsers(res.data); console.log(res.data); }; fecthData(); */

Answer 1

嘗試

const x = countries.lenth ? countries[0].name : 'Loading...'

console.log(x)

您正面臨這個問題，因為state需要時間來存儲數據，並且在數據保存到 state 之前，DOM 會自行呈現。