React 上下文 API 中的 React Native Update state & useState Hook

Question

我有一个带有表单的组件，提交后我想清除表单值。但是有点不清楚在哪里清空表单值。因为我必须从上下文传递回调或其他东西来设置组件中的Form值。

我的表单组件

const { updateUserData, state} = useContext(UserContext);
const [name, setName] = useState(state.name);
const [age, setAge] = useState(state.age);
<Input
value={name}
label='Enter Name'
placeholder=''
onChangeText={(value) => setName(value)}
/>
<Input
value={age}
label='Enter Age'
placeholder=''
onChangeText={(value) => setAge(value)}
/>
<Button
onPress={() => {
let formData = { name, age }
updateUserData(formData)
}}>
Update Data
</Button>

我的上下文&还原器在单独的文件中

const updateUserData= (dispatch) => async (formData) => {
// Validation functions
// If validation fails the name and age values cannot be changed
if(!valid){
dispatch({ type: 'NOT_VALID', payload: // errors to be shown })
}
// Some API functions
dispatch({ type: 'RESET_FORM' })
}
const userReduucer= (state, action) => {
switch (action.type) {
case 'RESET_FORM':
return {
...state,
name: '',
age: '',
};
}
}
export const { Context, Provider } = createDataContext(
userReduucer,
{ updateUserData },
{ name: '', age: '' },
)

Answer 1

名称和年龄值正在本地更改，因此您也需要在本地重置状态，而不仅仅是在redux存储中

<Button
onPress={() => {
let formData = { name, age }
updateUserData(formData);
setName('');
setAge('');
}}>

但是，由于您对updateUserData中的值运行验证，因此可以编写一个useEffect，将本地值更新为reducer 的值

useEffect(() => {
setName(state.name);
setAge(state.age);
}, [state.name, state.age])
...
<Button
onPress={() => {
let formData = { name, age }
updateUserData(formData);
}}>