React 的 Hook 调用无效？

Question

I'm trying to update the state of my component, but for some reason it keeps saying 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.

I'm trying to have a modal that opens onclick of a <div> . Within that modal is a text input that will update the state (notes). For some reason it's saying invalid hook call - why is that?

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

Seems like you tried to render testModal in react as an event, which's not a way to go, at all. Instead you must render your testModal as component, like that, so click on Test div will open your modal:

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>
  )
};

Hope it helps :)

Answer 2

It's not working because your testHooks is calling to setState from a separate component. Add you testHooks code into your openTestModal component. It would work as is if TestHooks was a child of openTestModal as well.