React本机setState钩子重新打开模态

Question

我在react native(expo(中遇到了一个模态的奇怪问题。我的模态看起来是这样的：

const useNewCommentModal = () => {
const [showModal, setShowModal] = useState(false);
const [comment, setComment] = useState('');
const toggle = () => {
setShowModal(!showModal);
};
const NewCommentModal = () => (
<Modal visible={showModal} animationType="slide">
<View style={[t.pX4]}>
<TextInput
style={[t.bgWhite, t.p2, t.rounded, t.textLg]}
placeholder={'Post jouw reactie...'}
onChangeText={text => setComment(text)}
value={comment}
/>
</View>
</Modal>
);
return [toggle, NewCommentModal];
};
export default useNewCommentModal;

当我键入时，模态保持重新打开。当我删除这个：

onChangeText={text => setComment(text)}

问题消失了，但显然状态不再更新。怎样模型一直在重新开放吗？

--编辑--

const [toggleModal, NewCommentModal] = useNewCommentModal(
'user',
route.params.user.id
);
<NewCommentModal />

Answer 1

每次运行useNewCommentModal钩子时，它都会创建一个名为NewCommentMode的新函数，然后用作组件<NewCommentModal />(这一部分非常重要(。对于React，每个新的NewCommentModal都与以前的不同(因为每次和每次渲染都创建新函数(，React将在新旧NewCommentModal之间运行相等比较，结果将返回false，因此React将卸载旧的模态并在其位置安装一个新的。之所以会发生这种情况，是因为您将函数作为组件调用。因此，您应该从钩子中返回的不是NewCommentModal组件，而是一个将呈现某个内容的函数(renderNewCommentModal(，并将其作为函数而不是组件调用({renderNewCommentModal()}(。或者更好的是，只从钩子返回数据，并使用这些数据在主要组件中呈现一些东西

请参阅我之前对此事的回答以获得更详细的解释https://stackoverflow.com/a/60048240/8390411