NodeJS App.js:32未捕获的类型错误:Tasks.map不是函数

pxiryf3j  于 2022-12-26  发布在  Node.js
关注(0)|答案(2)|浏览(112)

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

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方法,但仍然无法获得任何内容,还尝试console.log任务,因此我在useEffect()中设置了任务,似乎无法在任务中设置它。我只是期待项目列表的输出。

6l7fqoea

6l7fqoea1#

添加可选链接运算符和Task数组,如下所示
{任务?.Map((项目)=〉)}

cwdobuhd

cwdobuhd2#

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.

相关问题