Question

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

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

代码示例如下：

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。

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

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

中

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

1 个答案: