React类组件返回HTML无报错及React Router路由渲染错误求解

你遇到的报错和组件不渲染的问题是两个错误共同导致的：

• 路由配置不符合React Router v6的规范：Route组件的element属性要求传入实例化后的React元素（即<组件名 />格式），你当前传入的是() => VIEW_LIST匿名函数，React渲染时识别到传入的是函数而非可渲染的节点，直接抛出你看到的警告，自然不会渲染对应组件内容。
• VIEW_LIST类组件存在逻辑漏洞：
  1. componentDidMount的异步回调中的return语句完全无效，React组件的渲染内容只能由render方法返回，生命周期函数内的返回值不会参与渲染。
  2. 初始state中list_elements被赋值为空字符串''，你在render中的判断条件this.state.list_elements != null会直接判定为真，组件初始化后直接渲染空的merchant_wrapper节点，不会触发Loading逻辑。
  3. 接口请求拿到的data存入state后，你没有在render方法中使用该数据渲染内容，就算后续state更新，页面也不会展示你期望的内容。

App.js路由部分 #

// 为简化展示省略导入代码
function App() {
  return (
    <BrowserRouter>
      <NAVBAR />
      <div id="window_container">
        <div id="display_container">
          <Routes>
            {/* 传入实例化的组件元素，不要传函数或组件类本身 */}
            <Route path="/" element={<VIEW_LIST />} />
            <Route path="/browse" element={<BROWSE_ITEMS />} />
          </Routes>
        </div>
      </div>
    </BrowserRouter>
  );
}

export default App;

VIEW_LIST组件部分 #

export class VIEW_LIST extends Component {
    constructor (props) {
        super(props);
        this.state = {
            // 初始值设为null，匹配render中的判断逻辑
            list_elements: null
        }
    }

    componentDidMount() {
        getList()
            .then(res => res.json())
            .then(data => {
                console.log(data);
                // 仅更新state即可，不需要return内容
                this.setState({list_elements: data});
            })
            .catch(err => {
                console.log(err);
            })
    }

    render () {
        if(this.state.list_elements != null) {
            return (
                <div id="merchant_wrapper">
                    {/* 这里使用state中的list_elements渲染你需要的内容，示例如下 */}
                    <div>I got the data</div>
                    {this.state.list_elements.map(item => <div key={item.id}>{item.content}</div>)}
                </div>
            )
        } else {
            return (
                <div id="merchant_loading"> 
                    Loading...
                </div>
            )
        }
        
    }
}

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