自定义SSR（非NextJS）中React Hooks useState报错的解决方法

核心错误原因 #

useState Hook 的返回值是数组，不是对象。你用对象解构的方式获取状态和更新函数，会导致setGreetingsBlockData被解析为undefined，调用时就会触发"is not a function"的错误。

具体修复步骤 #

1. 修正解构方式：将对象解构改为数组解构，这是useState的标准用法：

// 错误写法
const { greetingsBlockData, setGreetingsBlockData } = useState({})

// 正确写法
const [greetingsBlockData, setGreetingsBlockData] = useState({})

2. 移除非法状态更新：组件顶层直接调用setGreetingsBlockData({test: 1})会触发无限重渲染循环（状态更新会重新执行组件代码，进而再次调用更新函数）。如果需要测试状态更新，应该放在useEffect或事件回调中。

修复后的完整代码示例：

const [greetingsBlockData, setGreetingsBlockData] = useState({})

useEffect(() => {
    fetch(`https://adventuretimeapi.herokuapp.com/people`, { method: "GET" })
        .then(res => res.json())
        .then(data => setGreetingsBlockData(data))
}, [])

// 如需测试状态更新，可放在useEffect内
// useEffect(() => {
//   setGreetingsBlockData({test: 1})
// }, [])

SSR环境的额外说明 #

在SSR场景中，组件会先在服务器端执行一次。错误的解构方式会直接在服务器抛出异常，导致渲染失败。修正数组解构后，服务器端能正常初始化状态，客户端hydration阶段也能保持状态一致性，避免额外的报错。

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