Состояние обновления React Native в React context API и useState Hook - PullRequest
Новая
       5

Состояние обновления React Native в React context API и useState Hook

2 голосов
/ 07 мая 2020

У меня есть компонент с формой, после отправки я хочу очистить значения формы. Но немного неясно, где очистить значения формы. Потому что мне нужно передать обратный вызов или что-то еще из контекста, чтобы установить значения формы в компоненте.

Мой компонент с формой 

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: '' },
)

1 Ответ

2 голосов
/ 07 мая 2020

Значения имени и возраста изменяются локально, поэтому вам нужно также сбрасывать состояния локально, а не только в хранилище redux 

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

Однако, поскольку вы запускаете проверки значений в updateUserData, вы можете написать useEffect, который обновляет локальные значения до значений редуктора 

    useEffect(() => {
        setName(state.name);
        setAge(state.age);
    }, [state.name, state.age])

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