Я следую учебному пособию и только что узнал о useEffect. У меня проблема в том, что я хочу получить result.hours[0].is_open_now. Я обнаружил, что компонент рендерит дважды, и, поскольку часы сначала не определены, происходит сбой.

Есть ли способ сделать это только один раз?

const ResultsShowScreen = ({ navigation }) => {

    const id = navigation.getParam('id');
    const [result, setResult] = React.useState({})

    const getResult = async (id) => {
       const response = await yelp.get(`/${id}`)
       setResult(response.data)
    }

    useEffect(() => {
        getResult(id)
     }, [])

    if (!result || result.length <= 0) {
        return null
    }

     const {name, 
            display_address, 
            price,
            display_phone,
            photos,
            review_count,
            rating,
            hours          
        } = result

        if (hours && hours.length > 0 ) {
            const is_open_now = hours[0].is_open_now
            console.log('running')
        } else {
            console.log('nooooo')
        }

    return (
        <View> 

            <Text style={styles.title}>{name}</Text>

            <Text>Price: {price}</Text>
            <Text>Rating: {rating}</Text>
            <Text>Reviews: {review_count}</Text>
            <Text>Phone: {display_phone}</Text>
            <Text>Is Open Now: </Text>
        </View>
    )

}

export default ResultsShowScreen
0
Pegasus

1 ответ

Следуя вашему коду, вы не можете запретить рендеринг useEffect дважды, потому что следуйте жизненный цикл реакции крюка ,

Если вы знакомы с методами жизненного цикла класса React, вы можете использовать useEffect Hook как комбинацию componentDidMount, componentDidUpdate и componentWillUnmount.

Это значит, что useEffect будет выполнен после первого рендеринга компонента (ваш код в первый раз равен нулю) и будет выполняться больше времени, если второй аргумент имеет значения.

В вашем useEffect вы вызываете setState для установки нового состояния и автоматического рендеринга компонента при изменении состояния. Таким образом, ваш компонент будет отображаться как минимум дважды.

58585228