React中Axios回调返回HTML标签后如何注入JSX渲染到DOM

你在axios异步回调里return JSX的写法是无效的。React是状态驱动的框架，异步回调的返回值不会被框架识别渲染，手动操作DOM插入节点的方式容易和React的重渲染逻辑冲突，不属于推荐实践。

和你当前表单渲染校验错误的逻辑保持一致，用状态驱动提示渲染即可，步骤如下：

• 新增独立状态存储注册接口返回的提示信息，和你现有的registerUsername等状态放在同级：

const [registerTip, setRegisterTip] = useState({ content: '', isError: true })

• 修改提交函数的逻辑，接口返回结果后更新状态，不要直接return JSX：

axios({
  method: "POST",
  data: {
    username: registerUsername,
    email: registerEmail,
    password: registerPassword,
  },
  withCredentials: true,
  url: "http://localhost:4000/register",
})
  .then((res) => {
    if (res.data === "Username already exists") {
      setRegisterTip({ content: "Username already exists", isError: true })
    } else {
      // 原代码此处漏写return，即使补全return也无法实现渲染
      setRegisterTip({ content: "Account registered", isError: false })
    }
  })
  .catch((err) => {
    console.log(err)
    setRegisterTip({ content: "Request failed, please try again later", isError: true })
  });

• 在表单的对应位置（比如确认密码错误提示下方、提交按钮上方）加入提示渲染逻辑：

{registerTip.content && (
  <p className={`text-sm ${registerTip.isError ? 'text-red-600' : 'text-green-600'}`}>
    {registerTip.content}
  </p>
)}

你当前代码中确认密码输入框的onChange绑定错误，现在写的是setRegisterUsername，输入确认密码时会覆盖用户名的状态值，需要替换为确认密码对应的状态更新方法。

这种方案完全符合React的设计逻辑，不需要手动操作DOM，不会被框架重渲染覆盖节点，也不存在innerHTML注入带来的安全风险，和现有代码风格统一，后续调整提示样式、位置都很方便。

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