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

Question

我对本机反应（博览会）中的模态有一个奇怪的问题。我的模态看起来像这样：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 钩子运行时，它都会创建一个名为 NewCommentModal 的新函数，然后你将其用作组件<NewCommentModal />（这部分非常重要）。对于 React，每一个新NewCommentModal的都不同于以前的（因为你每次和每次渲染都创建新函数），React 会在新旧之间运行相等比较，NewCommentModal这将返回 false，因此 React 将卸载旧模式并安装一个新模式这是地方。发生这种情况是因为您将函数称为组件。因此，您不应该NewCommentModal从您的钩子中返回组件，而是返回一个将呈现某些内容的函数 ( renderNewCommentModal)，并且不将其作为组件调用，而是作为函数 ( {renderNewCommentModal()}) 调用。或者更好的是，只从钩子返回数据，并使用这些数据在你的主组件中渲染一些东西