无效的钩子调用反应?

Question

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

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

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

似乎您试图在 react 中将testModal渲染为一个事件，这根本不是一种方式。相反，您必须将testModal渲染为组件，就像这样，因此单击测试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 的子代，它就会按原样工作。