React 中的强制组件渲染

Question

我有一个 react 应用程序，它从后端获取待办事项列表，将它们显示在列表中，并为您提供一个添加新待办事项的按钮。

我注意到新添加的待办事项只会在我刷新页面后出现在列表中（例如，在它从后端获取之后）。 我想强制组件重新渲染新添加的任务，理想情况下没有后端调用。 我怎样才能做到这一点？

我点击“添加”后的组件 - 文本留在框中，未出现在列表中

在我点击添加并刷新页面之后的页面 - 出现在下方 - 我希望这种行为在没有手动刷新的情况下发生

应用程序.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

APIHelper.js

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

Answer 1

在createTodo function 中，您需要重置您的todo state。 这意味着再次将其设置为空字符串：

const createTodo = async (e: { preventDefault: () => void; }) => {
    // ...
    setTodo(''); // Here
}

Answer 2

对我来说， APIHelper.createTodo似乎返回了错误的 object。 列表项在屏幕上，但没有task属性。
如上所述，尽量防止 forceUpdate() 组件。

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

要重置input字段， setTodo("")设置为空字符串

Answer 3

通常你应该避免这种情况，但你仍然在这里 go 你可以使用 forceUpdate

在您的组件中，您可以调用this.forceUpdate()来强制重新渲染。

文档： https://facebook.github.io/react/docs/component-api.html