React Hooks的使用问题

一个登录页面，分为父组件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开发，好多问题

回答

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

✌️ Hook 使用规则

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

  • 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。

  • 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中，我们稍后会学习到。）

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

以上是 React Hooks的使用问题 的全部内容， 来源链接： utcz.com/a/28931.html

回到顶部