0

Имеется компонент

import React, {useState} from "react";
import { View, StyleSheet, Text } from "react-native";

import ErrorIcon from "../icons-svg/error_icon";
import colors from "../../config/colors";

export function ErrorElement(props) {
    const [isVisible, setVisible] = useState(true);

    function ErrorView() {
        return(
            <View style={styles.errorStatusContainer} >
            <ErrorIcon style={styles.icon}/>
            <Text 
                numberOfLines={1} 
                style={styles.textContainer} >
                {props.text}
            </Text>
        </View>
        )
    };
    return(
        isVisible ? <ErrorView /> : null
    )
}

const styles = StyleSheet.create({
    errorStatusContainer:{
        flexDirection: "row",
        backgroundColor:colors.background_light_grey,
        width:"80%",
        height:45,
        marginTop:10,
        borderRadius:15,
        alignItems:"center"
    },
    icon:{
        margin:10
    },
    textContainer:{
        width:"80%"
    }
})

Который возвращает просто иконку с текстом ошибки.

Вполне возможно, что я не понимаю React и делаю ошибку в логике написанного. Но стараюсь следовать документации.

Вопрос такой: как можно изменять состояние извне? То есть обращаться к setVisible для изменения переменной isVisible.

Проработанные примеры содержат непосредственно функцию в самом компоненте и вызывают ее при наступлении события, который связан с ним. Например, нажатие кнопки или тап по элементу на экране etc.

Моя цель это использовать данный компонент с функцией скрыть/показать не привязываясь к какому-то конекретному событию.

1 ответ 1

0

Решение выглядит следующим образом
В родителе где я использую компонент errorElement я создаю такую сущность

<ErrorElement 
  key={register}
  text={message}
  showValue={value}
  isShow={Boolean(errorRegisters[register]) !== Boolean(value)}
        />

Для хранения состояния использую useState хук. Согласно документации необходимо размещать их сразу после объявления функции и выглядит вот так

const [errorRegisters, setErrorRegisters] = useState(()=>{
    let values = {};
            values[register] = Boolean(value);
        }
    }
    return values
})

И так же пишу логику для обновления состояния как колбэк функцию для setErrorRegisters

Теперь при обновлении состояния будет обновляться и сам элемент и чтобы его вывести на экран отрендеренным я использовал такую проверку через useEffect() хук, который срабатывает только при изменении сущности errorRegisters

let showEl = [];
useEffect(() => {
    if (item.props.isShow === true) {
        showEl.push(item);
    }
},[errorRegisters])

И как итог это рендер

return(
    <View>
        {showEl}
    </View>
)

В реале логика завязана на массив таких элементов и работает при наступлении событий, которые не связаны с действиями пользователя на экране телефона, поэтому весь код не пихаю, а пробежался только по контрольным пунктам.

Знатоки, укажите на косяки и недостатки.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.