React中主组件调用含Hooks的函数组件报错？求排查修正

一、主组件调用的核心错误 #

你在主组件里的组件调用写法完全错误：

• 你定义的组件是Get_Data，但你写了<Left_Side {Get_Data}/>，这既没有正确渲染Get_Data组件，也错误使用了未定义的Left_Side（它只是注释里的文字）。
• 正确的组件调用方式是直接写<Get_Data />，不需要额外包裹不存在的组件，也不需要错误的props传递格式。

二、Get_Data组件内部的多个错误 #

除了调用问题，组件自身也有多处语法和逻辑错误：

1. 函数组件不能用this.state：函数组件里没有this，你定义的状态是state变量，而且初始值是对象{sampleState: 'hola'}，所以{this.state.name}要改成{state.sampleState}（如果要显示初始的'hola'）。
2. onInput事件处理逻辑错误：onInput={setState(e.target.value)}会在组件渲染时直接执行setState，导致无限更新。正确写法是传递事件处理函数，同时保持状态结构一致：onInput={(e) => setState({sampleState: e.target.value})}。
3. JSX里要用className代替class：React的JSX语法中，HTML的class属性要写成className，否则会触发语法错误。
4. 直接渲染对象会报错：按钮里的{state}是渲染整个状态对象，React无法直接渲染对象，应该渲染对象的属性，比如{state.sampleState}。
5. input标签建议用自闭合写法：规范写法是<input type="text" id={id} ... />，不需要单独的</input>标签。

修复后的完整代码 #

Get_Data组件 #

import { useId, useState } from 'react';

const Get_Data = () => {
    const id = useId();
    const [state, setState] = useState({sampleState: 'hola'})
    
    return (
        <div className="nav_container">
            <div className="nav_block">
                <a href='/about'>About</a>
            </div>
            <div className="nav_block">
                <a href='/Suma'>Sum</a>
            </div>
            <div className="nav_block">
                <a href='/Menos'>Menos</a>
            </div>
            <div className="nav_block">
                <a href='/data'>{state.sampleState}</a>
            </div>
            <label htmlFor={id}> Please specify: </label>
            <input 
                type="text" 
                id={id} 
                onInput={(e) => setState({sampleState: e.target.value})}
                defaultValue={state.sampleState}
            />
            <button>
                {state.sampleState}
            </button>
        </div>
    )
}

主组件 #

import ReactDOMClient from 'react-dom/client';
import Get_Data from './Get_Data'; // 路径根据实际文件位置调整

const container = document.getElementById('root');
const root = ReactDOMClient.createRoot(container);

root.render(
    <div className='container'>
        <Get_Data />
    </div>
)

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