Reactjs React native useReducer用于从身份验证发送输入值
我是reactnative新手,试图用2个自定义输入文本和一个登录按钮实现简单的登录表单,但访问更新的值时遇到了问题 请找到我的密码Reactjs React native useReducer用于从身份验证发送输入值,reactjs,react-native,reducers,Reactjs,React Native,Reducers,我是reactnative新手,试图用2个自定义输入文本和一个登录按钮实现简单的登录表单,但访问更新的值时遇到了问题 请找到我的密码 const loginReducer = (state, action) => { if (action.type === LOGIN_FORM) { const updatedValues = { ...state.inputValues, [action.input]: action.value, };
const loginReducer = (state, action) => {
if (action.type === LOGIN_FORM)
{
const updatedValues = {
...state.inputValues,
[action.input]: action.value,
};
const updatedValidities = {
...state.inputValidities,
[action.input]: action.isValid,
};
let updatedFormIsValid = true;
for (const key in updatedValidities) {
updatedFormIsValid = updatedFormIsValid && updatedValidities[key];
}
return {
formIsValid: updatedFormIsValid,
inputValidities: updatedValidities,
inputValues: updatedValues,
};
}
return state;
};
const LoginScreen = (props) => {
const dispatch = useDispatch();
const intialState = {
inputValues: {
email: "",
password: "",
},
inputValidities: {
email: false,
password: false,
},
formIsValid: false,
};
const [formState, dispatchFormState] = useReducer(loginReducer , intialState);
const inputChangeHandler = useCallback(
(inputIdentifier, inputValue, inputValidity) => {
dispatchFormState({
type: LOGIN_FORM,
value: inputValue,
isValid: inputValidity,
input: inputIdentifier,
});
},
[dispatchFormState]
);
const authHandler = async () => {
let action;
//problem updating state values
action = authActions.login(
formState.inputValues.email,
formState.inputValues.password
);
await dispatch(action);
};
<MyInput
id="email"
label="E-Mail"
keyboardType="email-address"
required
email
autoCapitalize="none"
errorText="Please enter a valid email address."
onInputChange={inputChangeHandler}
/>
<MyInput
id="password"
label="Password"
keyboardType="default"
secureTextEntry
required
minLength={5}
autoCapitalize="none"
errorText="Please enter a valid password."
onInputChange={inputChangeHandler}
/>
<View style={styles.buttonContainer}>
<Button
title="Login"
color="blue"
onPress={authHandler}
/>
</View>
const loginReducer=(状态、操作)=>{
if(action.type==登录表单)
{
常量更新值={
…state.inputValues,
[action.input]:action.value,
};
常数更新有效性={
…state.inputValidities,
[action.input]:action.isValid,
};
让updatedFormIsValid=true;
for(更新有效性中的常量键){
updatedFormIsValid=updatedFormIsValid&&updatedValidities[key];
}
返回{
formIsValid:updatedFormIsValid,
输入有效性:更新的有效性,
inputValues:updatedValues,
};
}
返回状态;
};
常量登录屏幕=(道具)=>{
const dispatch=usedpatch();
常量初始状态={
输入值:{
电邮:“,
密码:“”,
},
输入有效性:{
电子邮件:false,
密码:false,
},
福米斯瓦利德:错,
};
const[formState,dispatchFormState]=useReducer(loginReducer,initialstate);
常量inputChangeHandler=useCallback(
(inputIdentifier、inputValue、inputValidity)=>{
dispatchFormState({
类型:登录表单,
值:输入值,
isValid:inputValidity,
输入:输入标识符,
});
},
[dispatchFormState]
);
const authHandler=async()=>{
让我们行动起来;
//更新状态值时出现问题
action=authoctions.login(
formState.inputValues.email,
formState.inputValues.password
);
待命(行动);
};
因此,在我的按钮中,单击我期待的authHandler
对象:
电子邮件:“test@test.com"
密码:“qwerty123”
但我的输出是
对象:
电子邮件:“
密码:“
qwerty123:对
test@test.com:对
如何获取电子邮件和密码值并发送到我的authactions
如果我遗漏了什么,请告诉我
谢谢