处理useEffect

Question

const UserProfile = ({
  user=[],
}) =>{ 
  useEffect(() => {
    console.log("mounted")
    console.log("inside: "+user.id)
  },[]);
  
  console.log("outside :"+user.id)
   return(
    <Text>hello</Text>
  );
};

为什么这会返回这个日志？我认为useEffect中的user.id应该返回相同的

​

​

Answer 1

你的效果只会被调用一次，在挂载时。在挂载时没有设置user值，您可以在日志(outside :undefined和inside: undefined)中看到这一点。然后，当您将带有id的user传递给UserProfile组件时，不会调用effect，因为使用空的依赖数组注册effect表明，它将仅在挂载时调用。

请查看：https://reactjs.org/docs/hooks-effect.html (最后一个黄色注释部分)

如果您希望每次user属性更改时都调用您的效果，请将其添加到依赖项数组，如下所示：

useEffect(() => {
...
},[user])

Answer 2

试试这个：

useEffect(() => {
  if (!user.id) {
    return
  }
  console.log("mounted")
  console.log("inside: "+user.id)
},[user])