Question

早上好！我昨天一直在尝试从mongodb中获取数据。但是，使用上面的代码，我在控制台中获取了json，但是无法将json放入状态中。你可以帮帮我吗？。感谢您的所有答复。：）

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需要花费一些时间来存储数据，并且在将数据保存为DOM本身的状态之前，会保存该数据。

使用react和axios从mongodb获取数据

1 个答案: