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