Question

我有一个问题，如何在路由器之前在我的appjs文件中触发useeffect方法

首先我该怎么做才能在应用js中使用useeffect触发器

Appjs文件

import GlobalContext from "./context/globalContext";
import Routers from "./router/index"
function App() {
    const {initAuth} = useContext(GlobalContext)
    alert("appjs")
    useEffect(() => {
        alert("appJS Use Effect")
        initAuth()
    }, [])
    return (
        <React.Fragment>
                <Routers/>
        </React.Fragment>
    );
}
export default App;

我的路由器

export default function Routers() {
    alert("RoutersJS")
    useEffect(()=>{
        alert("useEffect RouterJS")
    },[])
    return (
        <Router>
             ....
       </Router>

    )
}

Answer 1

Yousaf是正确的，您不能直接执行此操作或更改渲染顺序。如果存在绝对必须在两个元素之间正确排序的副作用，则可以创建一个支持路由器的道具，告诉它何时允许其产生副作用。

这在这些元素之间引入了很多耦合，除非您绝对需要这两个元素具有必须排序的副作用，否则我不建议这样做。

function App() {
    ...
    const [hasAlerted, setHasAlerted] = useState(false);
    useEffect(() => {
        alert("appJS Use Effect");
        initAuth();
        setHasAlerted(true);
    }, [])
    return (
        <React.Fragment>
                <Routers canAlert={hasAlerted} />
        </React.Fragment>
    );
}


export default function Routers({canAlert})) {
    useEffect(()=>{
        if (canAlert) {
            alert("useEffect RouterJS")
        }
    },[canAlert])
    return (
        <Router>
             ....
       </Router>

    )
}

快速说明

在第一个渲染中，hasAlerted将为false。 App将在第一次渲染后发出警报。我们会将canAlert=false传递给Routers组件，因此它不会在第一个渲染器上发出警报。

因为我们setHasAlerted(true)将再次渲染树。在第二个渲染中，hasAlerted将为true。 App不会发出警报，因为它的useEffect依赖项尚未更改。我们会将canAlert=true传递给Routers组件，这样它将在第二个渲染器上发出警报。

同样，如果可能的话，我可能会探讨其他解决方案。

在useeffect路由器之前反应appjs触发

1 个答案: