Saya mengikuti tutorial dan baru belajar tentang useEffect. Masalah yang saya alami adalah saya ingin mendapatkan result.hours[0].is_open_now. Saya telah menemukan bahwa komponen merender dua kali, dan karena jam tidak ditentukan pada awalnya, itu gagal.

Apakah ada cara untuk membuat ini hanya berjalan sekali.

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 28 Oktober 2019, 05:47

1 menjawab

Jawaban Terbaik

Mengikuti kode Anda, Anda tidak dapat mencegah useEffect membuat dua kali karena mengikuti react hook lifecycle,

Jika Anda terbiasa dengan metode siklus hidup kelas React, Anda dapat menganggap useEffect Hook sebagai gabungan componentDidMount, componentDidUpdate, dan componentWillUnmount.

Itu berarti useEffect akan dieksekusi setelah komponen dirender pertama kali (Kode Anda pertama kali null) dan dieksekusi lebih lama jika argumen kedua memiliki nilai.

Di useEffect, Anda memanggil setState untuk menyetel status baru dan render otomatis komponen jika status berubah. Jadi komponen Anda akan dirender setidaknya dua kali.

3
Hải Bùi 28 Oktober 2019, 03:31