React条件渲染出现"Nothing was returned from render"报错原因是什么

• 核心错误：default分支没有给组件返回值。axios.post是异步方法，调用后会立即返回Promise对象，不会阻塞后续代码执行，then和catch回调里的return只是回调函数本身的返回值，不属于组件渲染的返回值，完全不会被React识别。因此进入default分支后，整个组件函数执行完没有返回任何JSX内容，就触发了渲染无返回的错误。
• 逻辑错误：React函数组件是同步渲染的，不能在渲染流程里直接发起异步请求、等待结果再返回内容，这类异步校验逻辑必须放在useEffect钩子中执行，配合状态管理控制渲染内容。
• 规范错误：组件名没有遵循大驼峰命名规范，React要求自定义组件名首字母必须大写，否则会被识别为普通HTML标签。

通过状态管理存储验证结果，在副作用钩子中执行异步校验逻辑，根据状态返回对应渲染内容：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

// 组件名首字母大写符合React规范
function ConditionalTest() {
  // 三个验证状态：pending校验中、success校验通过、fail校验失败
  const [verifyStatus, setVerifyStatus] = useState('pending')

  useEffect(() => {
    const token = sessionStorage.getItem('token')
    // 无token直接跳转登录页
    if (!token) {
      window.location.replace("/login")
      setVerifyStatus('fail')
      return
    }

    const verifyjson = {
      verify: {
        token: token
      }
    }

    axios.post('/api/verifylogin', verifyjson)
      .then((response) => {
        console.log(response.data.verification)
        setVerifyStatus('success')
      })
      .catch((reason) => {
        console.log("Token invalid, please login again")
        sessionStorage.removeItem('token')
        window.location.replace("/login")
        setVerifyStatus('fail')
      })
  }, [])

  // 同步根据状态返回渲染内容
  switch(verifyStatus) {
    case 'pending':
      return <h1>正在验证登录状态...</h1>
    case 'success':
      return <h1>Test valid login</h1>
    case 'fail':
      return <h1>Auth failed</h1>
  }
}

export default ConditionalTest;

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