React项目useState报错：TypeError致Tab组件失效及页面内容消失

核心错误 #

你遇到的TypeError: useState is not a function or its return value is not iterable，根源在Tabs组件的useState语法写错了：

// 错误写法
const [toggleState, setToggleState] = useState=(1)

这里把调用useState的括号()写成了赋值符号=，相当于把数字1赋值给了useState变量，而不是调用useState初始化状态。正确的useState调用应该用括号传初始值，这样才会返回包含状态和更新函数的可迭代数组，解构才不会报错。

修正后的Tabs组件代码 #

import { useState } from 'react';
import './Tabs.css'

function Tabs () {
  // 修正useState的调用语法
  const [toggleState, setToggleState] = useState(1)

  const toggleTab = (index) => {
      setToggleState(index);
  }

  return(
    <div className="container">
      <div className='nav-tabs'>
        <button className={toggleState === 1 ? "tabs active-tabs" : "tabs"}
            onClick={() => toggleTab(1)}>Tab 1</button>
        <button className={toggleState === 2 ? "tabs active-tabs" : "tabs"}
            onClick={() => toggleTab(2)}>Tab 2</button>
        <button className={toggleState === 3 ? "tabs active-tabs" : "tabs"}
            onClick={() => toggleTab(3)}>Tab 3</button>
        <button className={toggleState === 4 ? "tabs active-tabs" : "tabs"}
            onClick={() => toggleTab(4)}>Tab 4</button>
      </div>

      <div className="content-tabs">
        {/* 根据toggleState控制内容显示 */}
        <div className={toggleState === 1 ? "content active-content" : "content"}>
          <h2>Quotes set 1:</h2>
          <p>data array </p>
        </div>
        <div className={toggleState === 2 ? "content active-content" : "content"}>
          <h2>Quotes set 2:</h2>
          <p>data array </p>
        </div>
        <div className={toggleState === 3 ? "content active-content" : "content"}>
          <h2>Quotes set 3:</h2>
          <p>data array </p>
        </div>
        <div className={toggleState === 4 ? "content active-content" : "content"}>
          <h2>Quotes set 4:</h2>
          <p>data array </p>
        </div>
      </div>
    </div>
  );
}
export default Tabs;

额外优化建议 #

1. App组件的列表结构修正：你的li直接放在main里不符合HTML规范，需要用ul包裹，同时避免循环参数名和数组名重名：

// App.js里的列表部分改成：
<ul>
  {quotes.map((quote, index) => (
    <li key={index}> {quote.quote} Author: {quote.author}</li>
  ))}
</ul>

2. Tab内容的显示逻辑：修正后的Tabs组件已经根据toggleState控制了active-content类，配合CSS就能实现点击Tab切换显示对应内容的效果。

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