React中使用useState出现setMessage is not a function错误求助

核心错误：useState 解构方式错误 #

你这里的关键问题是useState 返回的是数组，不是对象，误用对象解构{message, setMessage}会导致setMessage未被正确赋值，因此触发“不是函数”的报错。

修正后的代码 #

import { useState, useEffect } from 'react'; // 确保导入hooks

function App() {
  // 改用数组解构，这是useState的正确用法
  const [message, setMessage] = useState("")

  useEffect(() => {
    fetch(`http://localhost:8080/message`)
      .then((res) => res.json())
      .then((data) => setMessage(data.message))
      .catch(err => console.error('请求出错:', err)) // 建议添加错误捕获
  }, []) // 空数组作为依赖，确保请求仅在组件挂载时执行一次，避免无限循环

  return (
    <div>
      <h1>hi there</h1>
      <h1>{message}</h1>
    </div>
  )
  
}

export default App;

额外优化说明 #

1. 补充useEffect依赖数组：原代码未传入依赖数组，会导致组件每次渲染都重复发起请求，空数组[]可限制请求仅在组件挂载时执行一次。
2. 添加错误捕获逻辑：在fetch链式调用末尾增加catch，能捕获请求或JSON解析过程中的异常，便于排查问题。
3. 确认hooks导入：必须从React中导入useState和useEffect，否则会引发未定义错误。

内容的提问来源于stack exchange，提问作者hadi-learn