Question

所以，我有这个组件 SidebarMenu 来自 Drawer.Navigator 的 drawerContent


    const SidebarMenu: React.FC<SidebarMenuProps> = (props) => {
    
      return (
        <View style={{ flex: 1 }}>
    
          <DocenteMenu />
    
          <DrawerContentScrollView {...props}>
            <View style={styles.itemContent}>
              <MenuItem label="Home" icon="home" pageName="Home" {...props} />
              <MenuItem label="Chamada eletrônica" icon="edit" pageName="CallList" {...props} />
              <MenuItem label="Horário aula" icon="calendar" pageName="ClassSchedule" {...props} />
              <MenuItem label="Diário eletrônico" icon="book-open" pageName="ClassDiary" {...props} />
              <MenuItem label="Agendamento prova" icon="file-plus" pageName="TestSchedule" {...props} />
              <MenuItem label="Relação de alunos" icon="users" pageName="StudentsList" {...props} />
              <MenuItem label="Holerite" icon="file-text" pageName="Payslip" {...props} />
            </View>
          </DrawerContentScrollView>
    
          <View style={styles.logoutContent}>
            <MenuItem label="Sair" icon="log-out" />
          </View>
        </View>
      );
    }
    
    export default SidebarMenu;

我正在尝试从组件 DocenteMenu 返回一个视图，但在那一刻返回错误。我已经尝试将此函数转换为“导出默认函数”并返回相同的错误


interface TeacherProps {
  COD_FUNCIONARIO: string,
  NOME_FUNC: string;
  DTA_NASC: Date;
  CPF: string;
  FOTO: string;
}
const DocenteMenu = () => {

  const [user, setUser] = useState<TeacherProps | null>();

  useEffect(function setUserProps() {

    const {docente} = useAuth();

    setUser(docente);

  }, []);

  return(
    <View style={styles.teacherInfo}>
      <Image
        style={styles.avatar}
        source={{ uri: user?.FOTO }}
      />
        <Text style={styles.teacherName}>{user?.NOME_FUNC}</Text>
        <Text style={styles.teacherCode}>{user?.COD_FUNCIONARIO }</Text>
    </View>
  );
}

export default DocenteMenu;

Answer 1

React Hooks 必须在 allOffers 或 Function Component 的顶层调用，因此将您的代码更改为此，您就可以开始了：

another custom hook

还可以阅读官方文档中关于 hooks 的规则：https://reactjs.org/docs/hooks-rules.html

这是对 const { docente } = useAuth(); useEffect(function setUserProps() { setUser(docente); }, []); 使用简单回调的最佳实践，并且不要给它起这样的名字：

useEffect

未处理的承诺拒绝：错误：钩子调用无效。 Hooks 只能在函数组件内部调用

1 个答案: