setIsOpen 不是函数

Posted 2023-02-14

【中文标题】setIsOpen 不是函数

【英文标题】：setIsOpen is not a function

【发布时间】：2022-01-12 21:46:42

【问题描述】：

我正在创建一个响应模式，我希望在单击卡片时出现模式，但我在显示它时遇到问题。我正在使用 UseState 来处理打开和关闭（切换真或假），但是当我点击卡片时，我收到一个错误提示 TypeError: setIsOpen is not a function 我怎样才能让它工作？我不明白为什么会这样。 这是我的代码。

import React,  useState  from "react";
import Modal from "../modal/projectModal.jsx";

// Scss
import "./projectBox.scss";

const ProjectBox = (props) => 
  const  isOpen, setIsOpen  = useState(false);

  return (
    <div>
      <div className="portfolio__box" onClick=() => setIsOpen(true)>
        <img src=props.preview  />
        <div className="portfolio__hover-info flex-center">
          <div className="text-center">
            <p className="font30 weight800">props.title</p>
            <p className="font12 weight500">props.tag</p>
          </div>
        </div>
      </div>
      <Modal open=isOpen>project details</Modal>
    </div>
  );
;

export default ProjectBox;

【问题讨论】：

useState 返回一个数组而不是一个对象。所以第一步是使用const [isOpen, setIsOpen] = useState(false);

添加，setIsOpen(!isOpen) 会更有意义地切换打开/关闭。

非常感谢！

【参考方案1】：

在您的useState 中将 更改为[ ]。 所以，就像

const [ isOpen, setIsOpen ] = useState(false);

【讨论】：

react 文档正在被重写以使用函数组件而不是类。所以很容易混淆。您可以参考新的 React 文档（目前处于测试阶段）useState 部分以进一步了解beta.reactjs.org/reference/usestate