时间戳

首页 > 解决方案 > React 本机 setState 钩子重新打开模式

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

问题描述

我对本机反应（博览会）中的模态有一个奇怪的问题。我的模态看起来像这样：

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 />

标签： javascriptreactjsreact-nativereact-hooksexpo

解决方案

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

有关此问题的更详细说明，请参阅我之前的回答https://stackoverflow.com/a/60048240/8390411

推荐阅读