Обновление полей избыточной формы значением после запроса на выборку

Question

Итак, я работаю с компонентом поиска адресов в реакции, и я хочу знать, как лучше всего обновить поля со значениями после того, как я получу данные обратно из API.Поэтому в данный момент я использую функцию извлечения в реакции для извлечения данных и заполнения некоторых полей формы, а затем устанавливаю их значение в виде различных состояний при возврате API.

Теперь, если вы используете обычный и т. Д. И т. Д., Это работает.Если вы измените это, чтобы использовать поле формы избыточного

Пример кода ниже:

import React from 'react';
import { Field } from 'redux-form';

class AddressFinder extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      data: {},
      postCode: ''
    };
    this.searchPostCode = this.searchPostCode.bind(this);
  }

  searchPostCode(e) {
    e.preventDefault();
    let Input = document.getElementsByClassName('postCodeSearch');
    let postCode = Input[0].value;

    const url = 'http://getaddressfinderurl/' + postCode + '';
    fetch(url)
      .then(res => res.json())
      .then(res => {
        this.setState({ 
          data: res,
        });
        return res
      })
      .catch(err => {
        console.log('Error happened during fetching!', err);
      });

    this.setState({ 
      data: res,
    });

  }

  updateBox(premisesName) {
    this.setState({ 
      premise: premisesName,
      data: []
    });
  }

  render() {
    console.log(this.state.data);
    return (
      <div className='address-finder'>
        <label className="app-form__field-label">{this.props.field.Label}</label>
        <input
          type='text'
          className='postCodeSearch app-form__input field'
          name='postCodeSearch'
        />
        <button onClick={this.searchPostCode}>Find Address</button>
        {this.state.data.premisesNames ?
          <ul className='address-finder__list'>
            {this.state.data.premisesNames.map((item, index) => <li onClick={() => this.updateBox(item.premisesName)} key={index} value={item.premisesName}>{item.premisesName}</li>)}
          </ul>
          : null
        }
        <Field
          type='text'
          className='app-form__input field cF'
          name='premise'
          value={this.state.data.premise}
          component='input'
        />
        <Field
          type='text'
          className='app-form__input field cF'
          name='streetName'
          component='input'
          value={this.state.data.streetName}
        />
        <Field
          type='text'
          className='app-form__input field cF'
          name='town'
          component='input'
          value={this.state.data.town}
        />
        <Field
          type='text'
          className='app-form__input field cF'
          name='postCode'
          component='input'
          value={this.state.data.postCode}
        />
      </div>
    );
  }
}

export default AddressFinder;

Answer 1

value - это не реквизит, который вы можете передать Field, это просто пример реквизита.В вашем коде вы даже не используете Redux afaik.

In redux-form Значения задаются на уровне формы, а не на каждом уровне поля.

Для этого вы можете настроить formчтобы выбрать значение из избыточности, и вместо использования setState в вашем компоненте вы отправляете действие избыточности.В конце действия будет обновлено состояние избыточности, и это обновление вызовет обновление значений формы.Поток документирован в https://redux -form.com / 7.4.2 / examples / initializefromstate /