Javascript 反作用力中的力分量重新加载装置

我有一个react应用程序，它从后端获取TODO列表，在列表中显示它们，并提供一个按钮来添加新的TODO

我注意到，新添加的待办事项只有在我刷新页面后才会出现在列表中（例如，从后端获取后）。我想强制组件使用新添加的to-do重新渲染，理想情况下不需要后端调用。我该怎么做

点击“添加”后的组件-文本保留在框中，不显示在列表中

点击添加并刷新页面后的页面-如下所示-我希望这种行为在不手动刷新的情况下发生

App.tsx

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

function App() {
  const [todos, setTodos] = useState([])
  const [todo, setTodo] = useState("")

  useEffect(() => {
    const fetchTodoAndSetTodos = async () => {
      const todos = await APIHelper.getAllTodos()
      setTodos(todos)
    }
    fetchTodoAndSetTodos()
  }, [])

  const createTodo = async (e: { preventDefault: () => void; }) => {
    e.preventDefault()
    const newTodo = await APIHelper.createTodo(todo)
    // @ts-ignore
    setTodos([...todos, newTodo])
  }

  return (
          <div className="App">
            <div>
              <input
                      id="todo-input"
                      type="text"
                      value={todo}
                      onChange={({target}) => setTodo(target.value)}
              />
              <button type="button" onClick={createTodo}>
                Add
              </button>
            </div>
            <ul>
              {todos.map(({_id, task, completed}, i) => (
                      <li
                              key={i}
                              className={completed ? "completed" : ""}
                      > {task}
                      </li>
              ))}
            </ul>
          </div>
  )
}

export default App

---

在

createTodo

函数中，您需要重置

todo

状态。 这意味着再次将其设置为空字符串：

const createTodo=async（e:{preventDefault:（）=>void；}）=>{
// ...
setTodo（“”）；//这里
}

对我来说，

APIHelper.createTodo

似乎返回了一个错误的对象。列表项在屏幕上，但没有

任务

属性。
如上所述，尝试阻止对组件执行forceUpdate（）。

---

要将

输入

字段，

setTodo（“”

重置为空字符串

通常应避免此情况，但仍可以使用forceUpdate

在组件中，可以调用

this.forceUpdate（）

强制重新加载

---

文档：

Chan您是否向我们展示了APIHelper.createTodo中的内容？当前的行为是什么？看起来它应该只显示列表中最新的todo。@Peter已更新it@giotskhada我将当前行为放在屏幕截图中-我可以添加哪些不清楚的内容？如果列表中已经有多个TODO，而您尝试添加一个新的TODO，会发生什么情况？键入后成功清除框，但是刷新行为仍然不起作用

import axios from "axios"

const API_URL_GET = "http://localhost:8080/"
const API_URL_CREATE = "http://localhost:8080/create"

async function createTodo(task) {
    const { data: newTodo } = await axios.post(API_URL_CREATE, {
        task,
    })
    return newTodo
}

async function getAllTodos() {
    const { data: todos } = await axios.get(API_URL_GET)
    return todos
}
export default { createTodo, getAllTodos }



  [1]: https://i.stack.imgur.com/CuYUK.png
  [2]: https://i.stack.imgur.com/PDne4.png

async function createTodo(task) {
    const { data: newTodo } = await axios.post(API_URL_CREATE, {
        task,
    });
    // check this newTodo value
    return newTodo
}