如何在更新中使用相同的表单时使用内部状态和redux更新表单

Question

在反应应用程序中，表单中有3个字段。

1. 价值下降，茶和咖啡（选择茶/咖啡领域2和3应该是可见的）
2. 茶/咖啡名称
3. 茶/咖啡数量

我正在使用setState设置一个状态，用于识别所选择的是茶或咖啡。

发布时效果很好。但我使用相同的表格进行更新。

只有字段1将加载实际值。但是字段2和字段3没有加载值，也没有读取任何值。

...
<Form onSubmit={this.props.hanleSubmit(this.onSubmit)}>
  <Field name="drink" type="select" onChange={(e) => {
   if (e.target.value === 'T') {
     this.setState({isTea: true})
   } else {
     this.setState({isTea: false})
   }
  }}component={renderField}>
    <option value="" disabled>select any</option>
    <option value="T">Tea</option>
    <option value="C">Coffee</option>
  </Field>
  {
    this.state.isTea && ...Field for Tea name and Field for Tea Qty...
  }
  {
    !this.state.isTea && ...Field for coffee name & field for coffee qty...
  }
</Form>

并在componentDidUpdate中进行更新

如果数据采用这种格式

   data = {
     drink: 'T',
     teaName: 'Green tea',
     coffeeName: null,
     teaQty: '4',
     coffeeQTy: null
  }

  ComponentDidUpdate(prevProps, prevState) {
    ...
    if (data) {
      if (data.drink === 'T') {
        this.setState({isTea: true});
      } else {
        this.setState({isTea: false});
      }

      this.props.change('drink', data.drink);

      if (data.drink === 'T') {
         this.props.change('teaName', data.teaName);
         this.props.change('teaQty', data.teaQty);
      } else {
         this.props.change('coffeeName', data.coffeeName);
         this.props.change('coffeeQty', data.coffeeQty);  
      }
    }
   ...
  }

我需要为字段2和3正确加载数据。它应该可以正常工作以更改值。

Answer 1

而不是手动setState你最好使用https://redux-form.com/8.1.0/examples/selectingformvalues/。

下面的示例代码应允许您在编辑时保留表单配置，同时显示基于其他字段的字段。