Обработка условий на основе полученных реквизитов при загрузке страницы

#reactjs

Вопрос:

Мне интересно, каков наилучший подход к обработке различных условий на основе того, какие реквизиты я получил. Было бы лучше поместить это условие в метод рендеринга или в componentWillMount? Что вы рекомендуете? Спасибо!!

Пример.

 render(){
        const { shippingAddress } = this.props.mockData || [];
        const { billingAddress } = this.props.mockData || [];

        if(shippingAddress.length > 0) { 
                let {city, state} = shippingAddress[0];
                this.setState({ cty: city, st: state })
        } else if (billingAddress > 0) {
                let {city, state} = billingAddress[0];
                this.setState({ cty: city, st: state })
        }

        let {city, state} = this.state;
        return (...);
}

1. Если вы поставите это так, это, вероятно, приведет к бесконечному повторному просмотру, поскольку вы устанавливаете состояние на уровне рендеринга. Используйте жизненный цикл перехвата для такого рода заданий

Ответ №1:

Реагирующие хуки в функциональном компоненте облегчат вам жизнь. Вы должны использовать useEffect .

 const [data, setData] = useState({city: '', state: ''})

useEffect(() => {

 const { shippingAddress } = props.mockData || [];
        const { billingAddress } = props.mockData || [];

        if(shippingAddress.length > 0) { 
                let {city, state} = shippingAddress[0];
                setData({ cty: city, st: state })
        } else if (billingAddress > 0) {
                let {city, state} = billingAddress[0];
                setData({ cty: city, st: state })
        }

}, [])

если вы хотите, чтобы ваш useEffect запускался каждый раз, когда вы получаете реквизит или он был изменен, тогда:

 useEffect(() => {

 const { shippingAddress } = props.mockData || [];
        const { billingAddress } = props.mockData || [];

        if(shippingAddress.length > 0) { 
                let {city, state} = shippingAddress[0];
                setData({ cty: city, st: state })
        } else if (billingAddress > 0) {
                let {city, state} = billingAddress[0];
                setData({ cty: city, st: state })
        }

}, [props])

Если вы ищете что-то, основанное на классе, вы можете componentDidMount()

 componentDidMount(){
 const { shippingAddress } = this.props.mockData || [];
        const { billingAddress } = this.props.mockData || [];

        if(shippingAddress.length > 0) { 
                let {city, state} = shippingAddress[0];
                this.setState({ cty: city, st: state })
        } else if (billingAddress > 0) {
                let {city, state} = billingAddress[0];
                this.setState({ cty: city, st: state })
        }

}

1. Какой метод жизненного цикла «без перехвата» лучше всего использовать?

2. Если вы хотите использовать первый фрагмент кода, разделяемый Musadiq, тогда используйте componentDidMount, а если вы хотите использовать второй фрагмент кода, тогда используйте componentDidUpdate. componentDidMount и componentDidUpdate не являются методами жизненного цикла подключений и работают только в компонентах класса.

3. @fosho Проверьте мой обновленный ответ и, пожалуйста, отметьте его как ответ.