React服务端响应后替换覆盖当前展示组件不生效问题

表单提交的事件回调函数里返回的JSX不会被React渲染。React只会解析渲染函数组件主return部分、或是类组件render方法里返回的JSX，事件处理函数的返回值不会被挂载到页面DOM中，所以哪怕你的接口请求成功、console正常打印，return的组件也不会显示，自然无法替换原有表单。
另外你原来的dataSubmit方法还有个隐性bug：fetch返回的Response对象的status属性在最外层，你直接返回response.json()的解析结果，后续拿到的response变量只是接口响应体，根本读不到status字段，判断response.status === 200逻辑永远不会命中。

通过状态驱动视图切换，这也是React最基础的条件渲染逻辑：

• 新增一个布尔类型的state，用来标记当前是否要展示提交后的组件
• 接口请求完成后，不要在回调里return JSX，直接修改这个state的值
• 在组件的主渲染逻辑中，根据state的值判断渲染表单还是目标组件

import { useState } from 'react';

export default function FormContainer() {
  // 控制渲染切换的状态：默认false展示表单，true展示提交后的组件
  const [isSubmitted, setIsSubmitted] = useState(false);
  // 保留你原有的业务状态，比如待提交的表单数据
  // const [toSend, setToSend] = useState({})

  const formSubmit = async e => {
    e.preventDefault();
    try {
      const response = await dataSubmit({ toSend });
      if (response.status === 200) {
        console.log("status 200");
      } else {
        console.log("error status");
      }
      // 接口返回后修改状态，触发组件重渲染切换视图
      setIsSubmitted(true);
    } catch (err) {
      console.error("提交请求异常", err);
      // 如果需要请求失败也展示错误页，也可以在这里把isSubmitted设为true
    }
  }

  async function dataSubmit(toSend) {
    const res = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(toSend)
    })
    // 先读取状态码，再解析响应体，修正之前拿不到status的问题
    const resData = await res.json();
    return {
      status: res.status,
      data: resData
    }
  }

  // 主渲染逻辑，根据状态判断展示内容
  return (
    <>
      {isSubmitted ? (
        <ComponentPage />
      ) : (
        <form onSubmit={formSubmit}>
          {/* 这里放你原有的所有表单项、提交按钮 */}
          <button type="submit">提交表单</button>
        </form>
      )}
    </>
  )
}

• 你之前尝试用useEffect没生效，大概率是没有把视图切换和状态绑定，这个场景不需要额外加useEffect，提交事件里直接改状态即可。
• 所有React的视图更新都要靠状态驱动，不要试图在事件回调、定时器这类非渲染逻辑里直接返回JSX期望页面渲染，这类写法React不会处理。
• 异步请求记得加try/catch捕获网络异常，避免请求失败时抛出未捕获的Promise错误。

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