Question

我正在学习教程，并且刚刚了解了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

Answer 1

遵循您的代码，您无法阻止useEffect两次渲染，因为遵循excellent solution，

如果您熟悉React类的生命周期方法，可以考虑 useEffect Hook作为componentDidMount，componentDidUpdate和 componentWillUnmount组合。

这意味着useEffect将在组件首次渲染后执行（您的代码的第一时间为null），如果第二个arg有值，则执行更多时间。

在您的useEffect中，您调用setState来设置新状态，并在状态改变时自动渲染组件。因此，您的组件将至少渲染两次。

组件渲染两次

1 个答案: