如何从节点获取对象数组答案

【问题标题】：how to fetch object array from node如何从节点获取对象数组
【发布时间】：2022-11-26 21:55:57
【问题描述】：

我正在使用 React js 和节点创建一个简单的待办事项应用程序，如何从节点获取对象数组（任务列表）以在单击按钮时做出反应以显示该列表

  const lists =[
    {toDo:"learn react"}
  ]
  app.post('/Todo',function(req, res){
    lists.push({ "toDo":req.body.list})
    console.log(lists)
    res.status(200).send({ message: "Task added!!"})
  }
)

  axios.post('http://localhost:8080/Todo',request)
        .then(resp=>{
            alert(resp.data.message);
        })
        .catch( err=>{
            console.log(err);
        })
  }

  return (
      <div >
        <h1>ToDo List</h1>
        <form onSubmit={handleSubmit}>
        <input type="text" placeholder=" Add item..." name="list" value={toDos} onChange={(e)=>setToDos(e.target.value)}/>
        <button id="btn" type="submit">Add</button>
        </form>
      </div>
  )
}

export default Todo;

如何获取数组以响应页面？

【问题讨论】：

标签： node.js reactjs express

【解决方案1】：

您需要将来自响应的数据存储在状态中。 useState 中的空数组最初是空的。但是，一旦执行了 axios 调用并返回了一些数据，就会调用 useEffect 函数并导致填充任务列表数组。然后可以迭代其结果并显示在前端。

let taskList = axios.post('http://localhost:8080/Todo',request)
    .then(resp=>{
        alert(resp.data.message);
    })
    .catch( err=>{
        console.log(err);
    })


const [tasks, setTasks] = useState([]);

useEffect(() => {
    setTasks(taskList);
}, [taskList]);


    return (

        <div >
        <h1>ToDo List</h1>
        <form onSubmit={handleSubmit}>
            <input type="text" placeholder=" Add item..." name="list" value={toDos} onChange={(e)=>setToDos(e.target.value)}/>
            {tasks.map(() => {
                return (
                    <div>
                        <h1>{tasks}</h1>
                    </div>
                )
            })}
            <button id="btn" type="submit">Add</button>
        </form>
        </div>
    );
}


export default Todo;

【讨论】：