React Hooks的使用问题

Question

一个登录页面，分为父组件LoginPage和子组件LoginForm。在父组件中把onSubmit方法传递给子组件，然后子组件点登录的时候把用户名和密码传递父组件。在onSubmit中判断用户名和密码是否为空，如果不是，就在这个方法里发送请求。
LoginPage

import useFetch from '@/hooks/useFetch';


const LoginPage = props => {
  const [ errors, setErrors ] = useState({});
  onSubmit = (userName, password) => {
    const errs = {
        userName: false,
        password: false
    }
    !userName && (errs.userName = true);
    !password && (errs.password = true);
    Object.keys(errs).length && setErrors({...errors,...errs})
    //* 登录请求，这里报错：只能在函数组件中调用hooks
    userName && password && useFetch(`${LOGIN_URL}?username=${userName}&password=${password}`, 'POST')
  };
  return LoginForm({ ...props, onSubmit, errors });
};
export default LoginPage;

LoginForm

const LoginForm = props => {
  const { onSubmit, errors } = props;
  const [ userName, setUserName ] = useState('');
  const [ password, setPassword ] = useState('');

  return (
    <Container>
        <Content>
          {/* <Image source={loginCover} style={styles.cover} resizeMode="cover" /> */}
          <View style={styles.logoWrapper}>
            <Image
              source={loginLogo}
              style={styles.logo}
              resizeMode="contain"
            />
          </View>
          <Form style={{ marginLeft: 50, marginRight: 50 }}>
            <Item
              error={errors.userName}
              style={{ marginBottom: 20 }}
            >
              <Icon active name="user" type="FontAwesome" />
              <Input
                placeholder="用户名"
                autoCorrect={false}
                autoCapitalize="none"
                value={userName}
                returnKeyType="next"
                onChangeText={text => setUserName(text)}
                //onSubmitEditing={() => this.focusInput("password")}
                blurOnSubmit={false}
              />
            </Item>
            <Item error={errors.password}>
              <Icon active name="lock" type="FontAwesome" />
              <Input
                placeholder="密码"
                secureTextEntry={true}
                value={password}
                returnKeyType="done"
                onChangeText={text => setPassword(text)}
                onSubmitEditing={onSubmit}
              />
            </Item>
          </Form>
          <View style={{alignItems: 'center', marginTop: 80}}>
            <LinearGradient
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 0 }}
              style={styles.linearGradient}
              colors={["#0067FF", "#199EFF"]}
            >
              <Button color="#fff" title="登录" onPress={() => onSubmit(userName, password)} />
            </LinearGradient>
          </View>
        </Content>
      </Container>
  )
}
export default LoginForm;

报错

自定义hook:useFetch

const useFetch = (url, method = 'GET', params = {}) => {
    const [ response, setResponse ] = useState(null);
    const [ error, setError ] = useState(null);
    useEffect(() => {
      const fetchData = async () => {
        try {
          const options = {
            method,
            headers: { 'Content-Type': 'application/json;charset=utf-8' },
            body: params
          }
          const res = await fetch(getUrl(url), options);
          const json = await res.json();
          setResponse(json);
        } catch (error) {
          setError(error);
        }
      };
      fetchData();
    }, []);
    return { response, error };
  };

  export default useFetch;

按报错的意思应该是不能在onSubmit方法里调用hook,应该在它的外面使用。但是我需要在onSubmit里边判断并获取用户名和密码再发送请求。这个怎么搞，我把onSubmit方法拿到loginPage外面去然后在把用户名和密码return出来吗，在LoginPage里面调用useFetch，感觉不太对。第一次用hooks开发，好多问题

Answer 1

你在事件回调函数中调用了 自定义 Hooks useFetch() 违反了 Hooks 使用规则。最好根据业务重新思考下这块逻辑怎么去拆分。
还有 使用Hooks 的话，建议开启 eslint 并安装插件 eslint-plugin-react-hooks

✌️ Hook 使用规则

Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：

• 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
• 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中，我们稍后会学习到。）

详细的使用规则，见官方文档=》https://zh-hans.reactjs.org/d...