React待办列表状态仅页面刷新时更新问题排查与解决

已解决 #

状态未更新的原因是tasks状态存储的是从数据库获取的对象数组，直接用setTasks([...tasks, input])更新状态会让最后一个元素变成字符串值。修改后端POST接口，让它返回刚创建的新条目，再用这个条目更新状态，问题就解决了。

原问题 #

我是React新手，用Hooks更新状态时，新增的待办任务只有页面刷新后才会显示，试了好几种方法都没解决。如果把状态变量放进useEffect的依赖数组，还会触发无限重渲染。

提交任务时新增项不显示，刷新页面后才会出现。

前端代码（App.js） #

import React, { useState, useEffect } from "react";
import './App.css';

function App() {

  const URL = "http://localhost:5000";

  const [input, setInput] = useState("");
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    fetchedItems().then(res => {
      console.log(res);
      setTasks(res);
    })
  }, [])

  const fetchedItems = () => {
    return fetch(URL)
      .then(res => res.json());
  }

  function handleInputChange(e) {
    setInput(e.target.value);
  }

  async function handleSubmit(e) {
    e.preventDefault();
    const originalTasks = tasks;
    try {
      const results = await fetch(URL, {
        method: "POST",
        headers: { "content-Type": "application/json" },
        body: JSON.stringify({ input: input })
      });
      originalTasks.push(input);
      setInput("");
      setTasks(originalTasks);
    }
    catch (err) {
      console.log("error:", err)
    }
  }

  return (
    <div>
      <div>
        <h2>To Do List</h2>
      </div>
      <form onSubmit={handleSubmit}>
        <input name="input" type="text" placeholder="enter task" value={input} onChange={handleInputChange}></input>
        <button type="submit">Add Task</button>
      </form>
      <ul>
        {tasks.map((task) =>
          <li key={task._id} id={task._id}>{task.value}</li>
        )}
      </ul>
    </div>
  );
}

export default App;

后端代码（app.js） #

const express = require("express");
const bodyParser = require("body-parser");
const todolistRoute = require("./Routes/todolistRoute");
const mongoose = require("mongoose");
require("dotenv/config");
const cors = require('cors');
const listModel = require("./Models/listModel");

const app = express();

// 中间件
app.use(cors());
app.use(bodyParser.json());
app.use(express.json());
// app.use('/todolist',todolistRoute);

// 连接MongoDB
mongoose.connect(process.env.DB_CONNECTION, () => {
  console.log("connected to TodoList DB");
})

// 路由
app.get("/", async (req, res) => {
  try {
    const fetchedItems = await listModel.find();
    res.json(fetchedItems);
    console.log("get request was made to server to fetch items")
  }
  catch (err) {
    console.log(err);
  }
})

.post("/", async (req, res) => { // 添加新待办项
  try {
    console.log(req.body.input);
    const item = new listModel({
      value: req.body.input
    });
    console.log(`item ID ${item.id} stored in DB`);
    await item.save();
  }
  catch (err) {
    console.log(err);
  }
});


// 监听端口
const port = 5000
app.listen(port, () => {
  console.log(`listening on port ${port}`);
})

内容的提问来源于stack exchange，提问作者Rishabh Agarwal