[英]Invalid hook call. useDispatch . Redux
I tried many things but I still have the error message "[Unhandled promise rejection: Error: Invalid hook call. Hooks can only be called inside of the body of a function component.".我尝试了很多方法,但仍然出现错误消息“[未处理的 promise 拒绝:错误:无效的挂钩调用。挂钩只能在 function 组件的主体内部调用。”。
I was using Context API still now and I migrate my App to Redux.我现在仍在使用上下文 API,我将我的应用程序迁移到 Redux。 I'm trying to do a simple thing: When I press a button I want it to call a function that will call my reducers based on the input.
我正在尝试做一件简单的事情:当我按下一个按钮时,我希望它调用一个 function,它将根据输入调用我的减速器。
Screen Signup.js:屏幕 Signup.js:
const SignUp = ({ navigation }) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [pseudo, setPseudo] = useState("");
const state = useSelector((state) => state.AuthReducer);
return (
<View style={styles.container}>
...other stuffs
<Button
title="test"
onPress={() => signUp({ email, pseudo, password, confirmPassword })}
/>
</View>
);
};
My authReducer.js我的 authReducer.js
export const AuthReducer = (state = 0, action) => {
switch (action.type) {
case "signin":
return {
errorMessage: "",
token: action.payload,
};
case "add_error":
return { ...state, errorMessage: action.payload };
....Other cases....
default:
return state;
}
};
export const signUp = async ({ email, pseudo, password, confirmPassword }) => {
const dispatch = useDispatch();
try {
response = await trackerApi.post("/api/signup", {
email,
pseudo,
password,
});
await AsyncStorage.setItem("token", response.data.token);
dispatch({
type: "signin",
payload: response.data.token,
});
RootNavigation.navigate("Tabs");
} catch (err) {
const { response } = err;
const { request, ...errorObject } = response;
let message = errorObject.data;
dispatch({
type: "add_error",
payload: message,
});
}
};
Even simple function like this doesn't work:即使像这样简单的 function 也不起作用:
export const signUp = async ({ email, pseudo, password, confirmPassword }) => {
const dispatch = useDispatch();
dispatch({ type: "add_error", payload: "test" });
};
useDispatch
is a hook and thus can only be called inside a functional component. useDispatch
是一个钩子,因此只能在功能组件内部调用。 You are calling the hook inside signup method and that is why it is throwing the error.您在注册方法中调用钩子,这就是它抛出错误的原因。
Try this in your SignUp
component -在您的
SignUp
组件中试试这个 -
const SignUp = ({ navigation }) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [pseudo, setPseudo] = useState("");
const state = useSelector((state) => state.AuthReducer);
const dispatch = useDispatch();
return (
<View style={styles.container}>
...other stuffs
<Button
title="test"
onPress={() => signUp({ email, pseudo, password, confirmPassword }, dispatch)}
/>
</View>
);
};
and in signup
, like this -并在
signup
时,像这样 -
export const signUp = async ({ email, pseudo, password, confirmPassword }, dispatch) => {
try {
response = await trackerApi.post("/api/signup", {
email,
pseudo,
password,
});
await AsyncStorage.setItem("token", response.data.token);
dispatch({
type: "signin",
payload: response.data.token,
});
RootNavigation.navigate("Tabs");
} catch (err) {
const { response } = err;
const { request, ...errorObject } = response;
let message = errorObject.data;
dispatch({
type: "add_error",
payload: message,
});
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.