React点击更多/关闭按钮触发TypeError报错的解决及按钮显隐需求

报错原因 #

你在showMore函数中的三目运算存在语法错误：连续相邻的括号会被JavaScript解析为「将前一个表达式的返回值作为函数调用」，而setVisible作为useState提供的状态更新函数，执行后无返回值（返回undefined），因此触发TypeError: setVisible(...) is not a function报错。

功能实现&代码修正 #

以下是修正后的完整代码，同时满足「数据量小于5时自动隐藏按钮」的需求：

import { useState } from 'react';

// 组件内部逻辑
const [visible, setVisible] = useState(5);
// 直接通过visible值判断展开状态，无需额外维护expanded状态，减少冗余
const isExpanded = visible !== 5;

const showMore = () => {
  // 改用if-else写法，可读性更高，避免三目运算多操作的语法问题
  if (visible === 5) {
    setVisible(ProductDetail.allergies.length);
  } else {
    setVisible(5);
  }
};

// 组件渲染逻辑
return (
  <>
    {/* 列表渲染部分 */}
    <ul>
      {ProductDetail && ProductDetail.allergies?.length ? (
        ProductDetail.allergies.slice(0, visible).map(All => (
          <li key={All.id}>{All.displayText}</li>
        ))
      ) : (
        <li>No information.</li>
      )}
    </ul>

    {/* 仅当数据总量大于5时渲染切换按钮 */}
    {ProductDetail?.allergies?.length > 5 && (
      <button type="button" onClick={showMore}>
        {isExpanded ? <span>close</span> : <span>see more</span>}
      </button>
    )}
  </>
);

如果你需要保留原来的expanded状态，仅修正语法错误的话，showMore函数可以修改为以下写法（用逗号分隔同一分支下的多个操作）：

const showMore = () => {
  visible === 5 
    ? (setVisible(ProductDetail.allergies.length), setExpanded(true))
    : (setVisible(5), setExpanded(false))
}

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