如何在子组件useEffect中使用props？props.user未定义如何解决

你遇到的props.user为undefined是多个问题共同导致的，按优先级修复如下： #

1. 父组件异步状态取值错误 #

React的状态更新是异步操作，你在fetchUsers中调用setUsers(tempUsers)后，当前作用域内的users还是初始的空数组，此时执行setActiveUser(users[0])本质是给activeUser赋值了undefined。

修复方式： #

修改fetchUsers返回拿到的用户数组，直接用返回值赋值给activeUser：

// 修改fetchUsers，新增返回值
const fetchUsers = async () => {
  let tempUsers = [];
  await Firebase.firestore().collection('users').get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
      tempUsers.push({
        id: doc.id,
        data: doc.data(),
      })
    });
  })
  setUsers(tempUsers);      
  return tempUsers;
}

// 修改useEffect，用返回的tempUsers赋值
useEffect(() => {
  fetchUsers().then((tempUsers) => {
    setActiveUser(tempUsers[0]);
    setIsLoading(false);
  })
},[]);

2. 父组件loading分支缺少return #

你的isLoading判断分支没有加return关键字，导致loading阶段父组件返回值为undefined，会引发异常渲染。

修复方式： #

给loading分支加return：

if(isLoading){
  // 新增return
  return <View>
    <Text>Loading...</Text>
  </View>
}else{
  return (
    <View>
      <Child user={activeUser} />
    </View>
  )
}

3. 子组件useEffect依赖配置错误 #

空依赖数组的useEffect只会在组件第一次挂载时执行一次，即使后续props.user更新也不会重新触发。你写的[props | props.user]是错误的位运算语法，依赖数组需要用逗号分隔单个依赖项。

修复方式： #

把props.user加入依赖数组：

useEffect(() => {
  if(props.user){
    console.log(props.user)
  }
}, [props.user])

内容的提问来源于stack exchange，提问作者Toni