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

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

反应本机setState钩子重新打开模式

1 个答案: