javascript - 在反应中显示对象数组

Question

** React 和 Node 的新手，正在尝试按照一些教程将数据提取到功能组件中。

我设法创建服务器并建立数据库连接，并按照 tuts 获取数据，但是当我继续通过输出数据来使用数据时，我没有得到任何结果。

我附上了控制台的屏幕截图，显示我的状态，锻炼，有数据。任何人都可以通过指导我哪里错了来帮助我。也许它是一个对象数组，我需要将它转换为其他东西？**

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

const Navbar = () => {
const [exercises, setCount] = useState([]);

useEffect(() => {
    axios
        .get('http://localhost:5000/exercises/')
        .then(response => {
            setCount([...exercises, response.data]);  
                   })
}, []);

console.log({exercises});

var formatted = exercises.map((item) => {
return(
 <div key="1">
   <p>{item.username}</p>
   <p>{item.duratiom}</p>
   </div>
)
});

 return(
 <div>
 {formatted}
 </div>
) ;

}
export default Navbar;[![enter image description here][1]][1]

从服务器获取调用

router.route('/').get((req,res) => {
Exercise.find()
    .then(exercises => res.json(exercises))
    .catch(err => res.status(400).json('Error:'+err));
});

标签： javascriptnode.jsarraysreactjsmongodb

Answer 1

在您的状态中添加数据时添加扩展运算符：

 setCount([...exercises, ...response.data]);