javascript - React create more/close on button click Type Error

Question

我制作了一个功能，一次打印 5 个数据，并在按下更多按钮时打印所有 data.length。

但有一个问题。每次单击按钮时，我都会收到错误消息。

为了说明我的代码，我首先创建了一个可见状态，一开始只显示 5。当单击“按钮”时，“扩展”说“真正的所有产品调用”“错误只显示前 5 个”

   const [visible, setVisible] = useState(5)
    const [expanded, setexpanded ] = useState(false);

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

  return (

 {ProductDetail && ProductDetail.allergies?.length ? 
                            ProductDetail.allergies.slice(0, visible).map(All => (
                            <li key={All.id}>
         {All.displayText}</li>
                        )) : <li>No information.</li>}
)


    
                    <button type="button" onClick={showMore}>
                        {expanded ? (
                            <span>close</span>
                        ) : (
                            <span>see more</span>
                        )}  
                    </button>
                    

    }

但是每次我点击按钮时都会出错。

类型错误：setVisible(...) 不是函数

  46 | 
  47 |    
  48 |    const showMore = () => {
> 49 |        visible === 5 ? (
  50 |          setVisible(ProductDetail.allergies.length)
  51 |        ) (
  52 |           setexpanded(true)

我不知道如何解决它。您想如何修改代码？哦，如果一开始少于5个，我想让按钮不可见，但我不知道如何编写代码。

标签： javascriptreactjstypescriptecmascript-6react-hooks