React 的 Hook 调用无效？

Question

我正在尝试更新我的组件的状态，但由于某种原因，它一直说Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

我正在尝试创建一个打开<div> onclick 的模式。 在该模态中是一个文本输入，它将更新状态（注释）。 出于某种原因，它说无效的钩子调用 - 为什么会这样？

const openTestModal = () => {

  let [notes, setNotes] = useState("");
  let [openModal, setOpenModal] = useState(true);

  let modalBody =
    <div>
      <TextInput
        value={notes}
        onChange={(value) => setNotes(value)}
      />
    </div>

  return (
    <Modal
      open={openModal}
      onCancel={() => setOpenModal(false)}
      onConfirm={() => console.log('works')}
      body={modalBody}
    />
  )
};

const TestHooks = () => {

  return (
     <div onClick={() => openTestModal()}>
       Test
     </div>
  )
};

Answer 1

似乎你试图将testModal渲染为一个事件，这根本不是一条路。 相反，您必须将您的testModal渲染为组件，就像那样，因此单击 Test div将打开您的模式：

const TestModal = () => {
  const [notes, setNotes] = useState("");

  const modalBody = (
    <div>
      <TextInput
        value={notes}
        onChange={(value) => setNotes(value)}
      />
    </div>
  )

  return (
    <Modal
      open={openModal}
      onCancel={() => setOpenModal(false)}
      onConfirm={() => console.log('works')}
      body={modalBody}
    />
  )
};

const TestHooks = () => {
  const [openModal, setOpenModal] = useState(false);
  return (
    <React.Fragment>
      <TestModal openModal={openModal} setOpenModal={setOpenModal} />
      <div onClick={() => setOpenModal(true)}>
        Test
      </div>
    <React.Fragment>
  )
};

希望能帮助到你 ：）

Answer 2

它不起作用，因为您的 testHooks 正在从单独的组件调用 setState。 将您的 testHooks 代码添加到您的 openTestModal 组件中。 如果 TestHooks 也是 openTestModal 的子代，它也能正常工作。