Реагировать - Как установить начальное значение элемента ввода из RedEx?

Question

Базовый сценарий -

У меня есть элемент ввода для адреса электронной почты. При нажатии сохранить электронное письмо сохраняется в базе данных. Когда я обновляюсь, я хочу, чтобы сохраненное значение из базы данных отображалось как начальное значение ввода. После этого я хочу контролировать значение входа через обычное состояние компонента. Проблема, с которой я сталкиваюсь, это установка начального значения состояния с реквизита. Я думал, что я могу установить состояние от props в CDU, сделав проверку preProps to currentProps.

Фактический сценарий -

Реквизит, который я пытаюсь сравнить, представляет собой массив объектов. Так что мелкое сравнение ХДС не поможет. Как мне это сделать?

Обратите внимание, что я не использую или не хочу использовать какую-либо библиотеку форм, поскольку в моих приложениях просто есть 3 поля ввода. Спасибо

Answer 1

Возможное решение для этого: 1. Создайте местный штат для электронной почты, например,

state = {
 email: '';
}

2. отправляет действие в componentDidMount, которое извлекает данные и сохраняет их в избыточном состоянии
3. используйте static getDerivedStateFromProps(props, state) для получения обновленных значений из реквизита (ссылка: https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops) как

static getDerivedStateFromProps(nextProps, prevState) {
  // do things with nextProps.email and prevState.email
  return {
    email: nextProps.someProp, 
  };
} 

Answer 2

Вам необходимо получить данные из базы данных на компонентном монтировании и установить состояние вашей электронной почты.Как этот пример ниже (я делаю это при редактировании пользователя) -

 componentDidMount() {
  var headers = {
    "Content-Type": "application/json",
    Authorization: `Token ${authToken}`
  };
  axios
    .get(`${serverURL}users/${this.props.match.params.id}`, {
      headers: headers
    })
    .then(res => {
      //console.log(res.data);
      let userdetails = res.data;
      this.setState({
        first_name: userdetails.first_name,
        last_name: userdetails.last_name,
        email: userdetails.email,
      });
    })
    .catch(function(error) {
      console.log(error);
    });
}