0

我有一个父组件。

function ParentComponent(){

  return (
     //loading is asynchronous variable which changes on some event call.
    {loading ? ( 
     <ChildComponent></ChildComponent>
    ): (
     <div>Some text...</div>
    )} 
  )
}

和一个子组件

function ChildComponent(){

  useEffect(() => {
     console.log("render child component"); 
  }, [])

  return (
     <div>This is child component</div>
  )
}

问题是,每当加载状态更改为 true 时,子组件 useEffect 挂钩每次都会调用,即使我将 [] 数组作为 useEffect 挂钩的第二个参数传递。但是,如果我删除条件然后更改加载状态,useEffect 可以完美运行。

4

2 回答 2

-1

好的,你这里有条件加载。一旦您的加载状态更改为 false - 您的组件将从 DOM 中删除并执行所有清理工作。一旦加载状态从 false 更改为 true - 您的组件将被添加并且所有初始化工作都将发生(useState 还将设置初始值等)。您可以尝试更新您的钩子以查看发生了什么。另请查看 useEffect文档

function ChildComponent(){

  useEffect(() => {
     console.log("render child component"); 
     return () => console.log("cleanup");
  }, [])

  return (
     <div>This is child component</div>
  )
}

所以我的建议是,你真的不想从 DOM 中删除组件,所以你不需要显示它

function ParentComponent(){

  return (
     //loading is asynchronous variable which changes on some event call.
     <ChildComponent style={{display: loading? 'block' : 'none' }}></ChildComponent>
    { !loading && <div>Some text...</div> } 
  )
}
于 2021-05-06T17:00:35.060 回答
-1

您应该loading通过道具传递状态并在 useEffect 中使用它。

父组件:

function ParentComponent(){

  return (
     //loading is asynchronous variable which changes on some event call.
    {loading ? ( 
     <ChildComponent loading={loading}></ChildComponent>
    ): (
     <div>Some text...</div>
    )} 
  )
}

子组件:

function ChildComponent(loading){

  useEffect(() => {
     console.log("render child component"); 
  }, [loading])

  return (
     <div>This is child component</div>
  )
}

于 2021-05-06T16:26:45.947 回答