如何使用 redux-form 在不同组件（向上一个组件）中显示 FieldArray 中的字段

Posted 2023-02-22

【中文标题】如何使用 redux-form 在不同组件（向上一个组件）中显示 FieldArray 中的字段

【英文标题】：How to display fields from FieldArray in a different component (one component up) with redux-form

【发布时间】：2021-04-30 11:49:15

【问题描述】：

我使用来自redux-form 的<FieldArray>（稍旧的版本，react 16.3.0 和 redux-form 7.2.1），如果我像在文档中那样使用它，它就可以工作。但我希望按钮显示在一个组件中，而字段显示在不同的组件中：

<App>
    <Cmp1/>
    <Cmp2/>
    // this is where I want the fields
</App>

按钮应位于<Cmp1/>，而实际字段应显示在<App/>。

<App/>:

class App extends React.Component
  constructor(props)
    this.state = 
      fields: []
    
   
 
  onFieldArrayChange(field)
    const fields = this.state;
    const newFields = fields.push(field);
    this.setState(...this.state, fields: newFields);
  

  render()
     return (
       <div>
           My App 
           <div>this.state.fields</div>
           <Cmp1 onFieldArrayChange=this.onFieldArrayChange.bind(this)
      </div>
     )

  

我尝试了以下，<Cmp1/>：

class Cmp1 extends React.Component
  renderMyFieldArray( fields, meta:  error, submitFailed  )
    return(
      <button type="button" onClick=() => this.props.onFieldArrayChange(<MyField
                      key=fields.length
                      name=`myName[$fields.length]`
                      index=fields.length)
       >Add Field</button>
    ) 
  
  
  render()
    return(
      <FieldArray name="myName" component=this.renderMyFieldArray.bind(this /> 
    )
  

这行得通，但是，输入真的很慢。当我尝试输入一个字符串时，它会在每个字母后切断，我必须再次单击该字段。

我也尝试像这样在<Cmp1/> 中传递字段：

<button type="button" onClick=() => this.props.onFieldArrayChange(fields)>
     Add Filter
</button>

然后在<App/> 中，我将状态设置为字段：

onFieldArrayChange(field)
  const fields = this.state;
  const newFields = fields.push();
  this.setState(...this.state, fields: newFields);

然后在渲染函数中，我像这样映射字段：

this.state.fields.map((name, index)=>
    return (
        <MyField
           key=index
           name=name
           index=index
        />
    );
)

在这种情况下，第一个字段不会显示。我必须单击两次才能显示 1 个字段。

我如何做到这一点？

【问题讨论】：

“当我尝试输入一个字符串时，它会在每个字母后切断，我必须再次单击该字段。” renderMyFieldArray 存在于 Cmp1 内部，因此每次 Cmp1 重新渲染时都会重新创建它。

【参考方案1】：

我真的找不到解决办法，但我用不同的方式解决了。

我将<FieldArray name="myName" component=this.myRenderFunc.bind(this) /> 放入<App/> 使用 myRenderFunc：

myRenderFunc( fields, meta:  error, submitFailed  ) 
        const handleClick = () => 
            fields.push();
            this.setState(...this.state, fields);
        

        return (
            <button type="button" onClick=handleClick.bind(this)>
                Add Filter
            </button>
        );
    

我保存状态中的字段，然后将它们传递到我的组件中：

<Comp1 fields=this.state.fields/>.