React表单提交API后UI不更新，如何实现无刷新展示变更？

提交数据后需要刷新才能看到新Todo，核心问题是提交操作仅完成了API数据写入，但未更新React组件内的Todo列表状态。React是状态驱动UI的，只有当状态发生变化时，组件才会重新渲染，所以必须在提交成功后同步更新本地状态。

核心思路 #

通过父组件（App.js）统一管理Todo列表状态，在表单提交成功后，将新创建的Todo同步到本地状态，触发UI自动更新。

具体代码修改 #

1. App.js：管理状态并提供更新回调

import { useState, useEffect } from 'react';
import TodoForm from './components/TodoForm';
import TodoList from './components/TodoList';

function App() {
  const [todos, setTodos] = useState([]);

  // 初始化加载Todo列表
  useEffect(() => {
    fetch('http://localhost:3001/todos')
      .then(res => res.json())
      .then(data => setTodos(data));
  }, []);

  // 接收新Todo并更新状态
  const updateTodoList = (newTodo) => {
    // 方式1：直接追加新Todo（高效，无需重复请求）
    setTodos(prev => [...prev, newTodo]);
    // 方式2：重新拉取完整列表（适合API返回数据有额外处理的场景）
    // fetch('http://localhost:3001/todos')
    //   .then(res => res.json())
    //   .then(data => setTodos(data));
  };

  return (
    <div className="App">
      <TodoForm onTodoSubmit={updateTodoList} />
      <TodoList todos={todos} />
    </div>
  );
}

export default App;

2. TodoForm/index.js：提交成功后调用更新回调

import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const TodoForm = ({ onTodoSubmit }) => {
  const validateSchema = Yup.object({
    title: Yup.string().required('Todo标题不能为空')
  });

  return (
    <Formik
      initialValues={{ title: '' }}
      validationSchema={validateSchema}
      onSubmit={(values, { resetForm }) => {
        fetch('http://localhost:3001/todos', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(values)
        })
        .then(res => res.json())
        .then(newTodo => {
          resetForm(); // 清空表单
          onTodoSubmit(newTodo); // 通知父组件更新状态
        })
        .catch(err => console.error('添加失败:', err));
      }}
    >
      <Form>
        <Field name="title" placeholder="输入Todo标题" />
        <ErrorMessage name="title" component="div" />
        <button type="submit">添加Todo</button>
      </Form>
    </Formik>
  );
};

export default TodoForm;

原理说明 #

• 表单提交成功后，json-server会返回包含自动生成id的新Todo对象。
• 调用onTodoSubmit将新Todo传入父组件，通过setTodos更新本地状态。
• React检测到状态变化后，会重新渲染TodoList组件，新Todo自动显示在页面上，无需手动刷新。

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