React native setState Hook открывает модально

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()}). Или, что еще лучше, возвращайте только данные из ловушки и используйте эти данные для визуализации чего-либо в вашем основном компоненте

Более подробное объяснение см. В моем предыдущем ответе по этому вопросу { ссылка }