Question

React Native 在 React 上下文 API 和 useState Hook 中更新状态

2020-05-07

460

reactjs react-native react-hooks

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

我的带表单的组件

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>

我的上下文和 Reducer 在单独的文件中

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);
      }}>