在获取请求后使用值更新 redux 表单字段答案

【问题标题】：Updating redux form fields with value after fetch request在获取请求后使用值更新 redux 表单字段
【发布时间】：2018-09-20 07:37:03
【问题描述】：

所以我在 react 中做一个地址查找器组件，我想知道在从 API 拉回数据后用值更新字段的最佳方法。所以目前我正在使用 fetch 来检索数据并填充一些表单字段，然后在返回 API 时将它们的值设置为不同的状态。

现在，如果您使用普通等，则可以使用。如果您将其更改为使用 redux 的表单字段

代码示例如下：

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;

【问题讨论】：

Now if you use normal etc etc this works. If you change this to use redux's form field。您的问题的某些部分似乎缺失了？

标签： javascript reactjs redux react-redux redux-form

【解决方案1】：

value 不是你可以传递给Field 的道具，它只是一个实例道具。在您的代码中，您甚至没有使用 Redux afaik。

在redux-form 中，值是在表单级别而不是在每个字段级别设置的。

要实现这一点，您可以设置您的 form 以从 redux 中选择值，而不是在组件中使用 setState 您调度一个 redux 操作。在操作结束时，redux 状态将更新，此更新将触发对表单值的更新。流程记录在https://redux-form.com/7.4.2/examples/initializefromstate/

【讨论】：