React useState Hook报错求助：‘react__WEBPACK_IMPORTED_MODULE_0___default非函数/不可迭代’

错误原因 #

Test组件中导入useState的方式错误，React的Hook需从react包中解构导入，而非直接默认导入。默认导入的react是整个React对象，不是useState函数，导致调用时出现迭代错误。

修正后的Test组件代码 #

import { useState } from 'react';

const Test = () => {
    const [message, setMessage] = useState("");
    // 注意：直接在组件顶层调用setMessage会触发无限重渲染，建议放在事件或useEffect中
    // 示例：useEffect(() => { setMessage("GOODBYE"); }, []);
    return (
        <div>HEY</div>
    );
}
export default Test;

额外提示 #

• 你当前代码中console.log(setMessage("GOODBYE"))会直接在组件渲染时调用setState，触发组件重复渲染，且setMessage返回值为undefined，控制台会打印undefined。若要初始化或更新状态，建议放在useEffect钩子（处理挂载逻辑）或事件处理函数中。

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