时间戳

首页 > 解决方案 > 使用全局变量从功能组件触发 useEffect

javascript - 使用全局变量从功能组件触发 useEffect

问题描述

我的问题是是否可以使用组件外部的变量触发 useEffect。

就我而言，我有这个主要组件，它的 useEffect 负责在每次变量“刷新”更改时更新信息。

function Main() {

const [data, setData] = useState([])
const [refresh, setRefresh] = useState(false)

useEffect(async () => {
    await axios.get(`${process.env.REACT_APP_SERVER_URL}/api/data/`)
        .then(res => {
            setData(res.data); 
        })
}, [refresh]);

然后我有一个函数，我可以在触发 useEffect 的组件或子组件内部调用，更新数据。

    const refreshData = () => setRefresh(!refresh);

到目前为止一切顺利，它可以按我的意愿工作，但现在我需要导出此函数以在与此无关的组件中使用，但我知道您无法导出在组件内声明的函数。

所以我的想法是在组件之外创建相同的函数，如下所示：

    let refreshOutside = false;

    export const refreshMainFromOutside = () => {
        refreshOutside = !refreshOutside;
    }

所以现在我可以将变量“refreshOutside”添加到 useEffect 中，如下所示：

useEffect(async () => {
    await axios.get(`${process.env.REACT_APP_SERVER_URL}/api/data/`)
        .then(res => {
            setData(res.data); 
        })
}, [refresh, refreshOutside]);

但是，如果我将它导入其他组件并调用它不会触发 useEffect 的方法，我对反应有点陌生，但我认为这是因为组件没有重新渲染。

有什么解决方案可能适用于我的情况吗？

提前致谢。

标签： javascriptreactjsuse-effect

解决方案

我建议你将你的钩子放在另一个文件中，然后useComponent.js将你的refreshDataas const 导出到其中，然后在你希望的任何组件中使用该钩子：

const useComponent = () => {
    const [data, setData] = useState([])
    const [refresh, setRefresh] = useState(false)

    useEffect(async () => {
        await axios.get(`${process.env.REACT_APP_SERVER_URL}/api/data/`)
            .then(res => {
                setData(res.data); 
            })
    }, [refresh, refreshOutside]);

    const refreshData = () => setRefresh(!refresh);

    export { refreshData }
}

export default useComponent

在任何组件中导入钩子，然后解构函数并使用它们：

import useComponent from '../hooks/useComponent'

const MyComponent = () => {

   const { refreshData } = useComponent()

   return <button onClick={refreshData}>Click to refresh!</button>

}

export default MyComponent

推荐阅读