App.js:32 Uncaught TypeError: Tasks.Map不是函数

Question

我真的不知道下面的代码到底出了什么问题

import Todo from './components/task.js'
import axios from 'axios'
import { useState } from 'react';
import { useEffect } from 'react';
function App() {
const [Tasks, setTasks] = useState([]);

useEffect(() => {
async function fetchTasks() {
await axios.get('http://localhost:5000/task')
.then(({data})=> setTasks(data))
.catch((err)=>console.log(err))

}
fetchTasks();
}, []);
if (Error){
<p>{Error.message}</p>
}
return (
<div className="App">
<div className="container-container">
<h1>AppTodo</h1>
<div className="input-class">
<input type="text" placeholder="Add your todos" id="input1-id" />
<input type="submit" id="input2-id" value="Add" />
</div>
{Tasks.map((items) => <Todo key={items._id} text={items.name} />)}
</div>
</div>
);
}
export default App;

我尝试改变获取api方法，但仍然无法得到任何东西，也试图控制台日志任务，因此我在useEffect()中有setTask，似乎它无法在任务中设置它。我只是在等待项目列表的输出。

Answer 1

添加可选链接操作符使用下面的任务数组

{Tasks?.map((items) =>)}

Answer 2

You just need to reomve {} curly brackets from data in .then 

useEffect(() => {
async function fetchTasks() {
await axios.get('http://localhost:5000/task')
.then((data)=> setTasks(data))
.catch((err)=>console.log(err))

}
fetchTasks();
}, []);

I have removed your curly brackets from line 5.