reactjs - 使用第二个参数时如何防止在组件安装时反应 useEffect 运行

Question

当我运行这个组件时，两个效果都被调用了。如何防止第二个在组件挂载时被调用？

const Item = ({route, navigation, ...props}) => {
    const [page, setPage] = useState(0)

    useEffect(() => {
      console.log('component mount')
      //call API with page 0
      //call another API
    }, [])

    useEffect(() => {
      console.log('called', page)
      //call API with page {page}
    }, [page])

    
    console.log('render')
    return (
        <Text>test</Text>
    );
}

标签： reactjs

Answer 1

useEffect将始终在初始渲染时运行，但您可以使用条件来确定应在效果内执行哪些操作。

在您的情况下，不需要任何条件，您只需要在第一个效果中删除第 0 页的 API 调用 - 以便在您的第二个效果中调用它。