Javascript 初始化动态创建的redux表单字段

我有一个动态创建的redux表单字段。例如，当我单击按钮时，我执行以下操作：

renderFormFields() {
 const r = someArray.map(s => {
   console.log(s.Value);
   return (<Field name={s.Name} type='number' component='input' min='1' {...s.Value} />);
 })

 {r}
}

render() {
 renderFormFields()
}

renderFormFields（）{
const r=someArray.map（s=>{
console.log（s.Value）；
返回（）；
})
{r}
}
render（）{
renderFormFields（）
}

---

现在，

console.log

正在为

s.value

打印正确的值，但是redux表单元素没有正确的值。呈现输入字段时，该值为

空

。知道动态创建redux表单字段时我可以做些什么来初始化它吗？（我不能使用文档中提到的handleInitialize函数方法，因为表单字段是在运行时动态生成的）

您不应该传播“s”而不是s.value吗

return (<Field name={s.Name} type='number' component='input' min='1' {...s} />);

return（）；

因为您在字符串表示法中使用了s，如

's.Name'

您可以这样放置{s.Name}

组件不包含

value

prop。您可以使用两个选项设置默认值：

initialValues

（如果您知道要动态添加的字段的默认值）

使用（如果默认值也是动态的）

redux表单中SimpleForm示例的修改版本：

从“React”导入React
从“react redux”导入{connect}
从“redux form”导入{Field，reduxForm}
const extendedFields=[{name:'City'，value:'hydrabad'}，{name:'Phone'，value:2}]；
类SimpleForm扩展了React.Component{
构造函数（）{
超级（）；
此.state={
显示扩展：错误
};
}
addExtendedFields（）{
//这不是处理状态的最佳方法。这样做是为了简单
this.setState（{showExtended:{initialized:false}}）；
}
RenderExpendedFields（）{
constr=extendedFields.map（字段=>{
返回(
{field.name}
);
});
返回r；
}
componentDidUpdate（）{
const{showExtended}=this.state；
if（showExtended&！showExtended.initialized）{
extendedFields.map（字段=>{
this.props.change（field.name，field.value）；//选项2
返回字段；
});
this.setState（{showExtended:{initialized:true}}）；
}
}
render（）{
const{handleSubmit，pristine，reset，submiting}=this.props；
const{showExtended}=this.state；
返回(
名字
姓
电子邮件
性
男性
女性
喜爱的颜色
红色
绿色
蓝色
雇佣
{showExtended&&this.renderExpendedFields（）}
笔记
提交
明确的价值观
显示扩展字段
);
}
}
让HOCSimpleForm=reduxForm({
表格：“简单”
})（SimpleForm）；
HOCSimpleForm=connect(
状态=>({
初始值：{City:'Test'}//选项1
})
)（HOCSimpleForm）
导出默认的HOCSimpleForm；

s除名称和值外还包含其他字段，如：s.电子邮件、s.电话等。spread操作员如何知道该字段的值？我可能应该在代码中使用不同于“Value”的字符串来清楚地解释。如果您只想使用Value，您不能直接设置prop Value={s.Value}吗？我已经尝试过了。即使如此，初始值也是空的。我的意思是，s.value的console.log显示为1，但文本框为空。顺便说一句，spread操作符只是扩展对象的所有属性。名字没有问题。我正在为它取正确的名字。是的，我需要使用

{s.Name}

（问题中的代码错误，我将修复它），但我的问题是字段的初始“值”。

import React from 'react'
import { connect } from 'react-redux'
import { Field, reduxForm } from 'redux-form'

const extendedFields = [{ name: 'City', value: 'Hyderabad' }, { name: 'Phone', value: 2 }];

class SimpleForm extends React.Component {

  constructor() {
    super();
    this.state = {
      showExtended: false
    };
  }

  addExtendedFields() {
    // Not the best way to handle state. Doing this for simplicity
    this.setState({ showExtended: { initialized: false } });
  }

  renderExtendedFields() {
    const r = extendedFields.map(field => {
      return (
        <div key={field.name}>
          <label>{field.name}</label>
          <div>
            <Field type='text' component='input' {...field} value={field.value} />
          </div>
        </div>
      );
    });

    return r;
  }

  componentDidUpdate() {
    const { showExtended } = this.state;
    if (showExtended && !showExtended.initialized) {
      extendedFields.map(field => {
        this.props.change(field.name, field.value); // Option-2
        return field;
      });
      this.setState({ showExtended: { initialized: true } });
    }
  }

  render() {
    const { handleSubmit, pristine, reset, submitting } = this.props;
    const { showExtended } = this.state;
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>First Name</label>
          <div>
            <Field name="firstName" component="input" type="text" placeholder="First Name" />
          </div>
        </div>
        <div>
          <label>Last Name</label>
          <div>
            <Field name="lastName" component="input" type="text" placeholder="Last Name" />
          </div>
        </div>
        <div>
          <label>Email</label>
          <div>
            <Field name="email" component="input" type="email" placeholder="Email" />
          </div>
        </div>
        <div>
          <label>Sex</label>
          <div>
            <label><Field name="sex" component="input" type="radio" value="male" /> Male</label>
            <label><Field name="sex" component="input" type="radio" value="female" /> Female</label>
          </div>
        </div>
        <div>
          <label>Favorite Color</label>
          <div>
            <Field name="favoriteColor" component="select">
              <option></option>
              <option value="ff0000">Red</option>
              <option value="00ff00">Green</option>
              <option value="0000ff">Blue</option>
            </Field>
          </div>
        </div>
        <div>
          <label htmlFor="employed">Employed</label>
          <div>
            <Field name="employed" id="employed" component="input" type="checkbox" />
          </div>
        </div>
        {showExtended && this.renderExtendedFields()}
        <div>
          <label>Notes</label>
          <div>
            <Field name="notes" component="textarea" />
          </div>
        </div>
        <div>
          <button type="submit" disabled={pristine || submitting}>Submit</button>
          <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
          <button type="button" onClick={this.addExtendedFields.bind(this)} disabled={showExtended}>Show Extended fields</button>
        </div>
      </form>
    );
  }
}

let HOCSimpleForm = reduxForm({
  form: 'simple'
})(SimpleForm);

HOCSimpleForm = connect(
  state => ({
    initialValues: { City: 'Test' } // Option-1
  })
)(HOCSimpleForm)

export default HOCSimpleForm;