将数组发送到 Redux 表单以在 select 下拉列表中生成选项

Question

正在处理身份验证的设置安全问题部分。服务器以数组形式响应 20 个左右的问题列表。我可以获得要呈现的表单和 select 框，但通过指定索引一次只能有一个选项。

如果我尝试发送整个数组，我会收到 undefined 错误。尝试在 ` 中执行 for loop 以遍历每个索引，这会产生错误。

我想弄清楚如何传递整个数组，以便它为数组中的每个条目创建一个 option。

这是我目前拥有的：

// ./set_security_questions.js

 // This renders errors regarding the form inputs
renderField(field) {
    const { 
        label,
        placeholder,
        type,
        name,
        questions,
        meta: {
            touched, 
            error 
        } 
    } = field;

    return (
        <div className='form-group'>
            <label>{label}</label>
            <select className='form-control' name={name}>
                 <option value={questions}>{questions}
                 </option>}
            </select>
            <input 
                className='form-control' 
                type={type}
                placeholder={placeholder}
                {...field.input} 
            />
            <div className='text-danger'>
                {touched ? error : ""}
            </div>
        </div>
    );
}


// The main body to be rendered
render() {
    if (this.props.permitRender) {
        const { handleSubmit } = this.props;
        return (
            <div>

                <h3>Set Security Questions</h3>
                <p>Please select two security questions that will be easy for you to remember.</p>

                <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                    {this.renderAlert()}

                    <Field
                        questions={this.props.questions.data.security_question}
                        label='Question 1'
                        placeholder='Answer 1'
                        name='a1'
                        type='text'
                        component={this.renderField} 
                    />

                    <Field
                        label='Question 2'
                        placeholder='Answer 2'
                        name='a2'
                        type='text'
                        component={this.renderField} 
                    />
                    <button type="submit" className="btn btn-primary">Submit</button>
                </form>
            </div>
        );            
    } else if (!this.props.permitRender) {
        return ( 
            <div> { this.renderAlert() } </div>
        );
    } 
}

此外，我从服务器返回的 JSON 看起来很奇怪，所以我需要解决这个问题，但仍然想知道如何将数组传递到表单中。 this.props.questions.data:

 data:
    id: 123
    key: "key_request"
    security_q1: null
    security_q2: null
    security_question: Array(29) 
        0: {security_question: "In what city or town did you meet your spouse / partner?"}
        1: {security_question: "In what city or town did your mother and father meet?"}
        2: {security_question: "In what town or city was your first full time job?"}
        3: {security_question: "What is the first name of your spouse's father?"}
        ......

Answer 1

这是我目前用来填充一组复选框的示例。复选框组件中没有任何特殊逻辑，我只是使用自定义 html 进行样式设置。

这是我的数据，一个简单的数组：

const env = {
  FONT_FORMATS: ['OTF', 'TTF', 'WOFF', 'WOFF2']
}

这是我组件的 render() 函数中的代码。我将每个项目存储在对象键下的 Redux 表单中 -> 文件类型。

<ul className='tags'>
    {envConfig.FONT_FORMATS.map((tag: string) => (
      <Field
        key={tag}
        value={tag}
        name={`fileTypes.[${tag}]`}
        id={tag.toLowerCase().replace(' ', '_')}
        type='checkbox'
        component={checkBox}
        label={tag}
      />
    ))}
  </ul>

希望对您有所帮助！

将数组发送到 Redux 表单以在 select 下拉列表中生成选项

Send an array to a Redux Form to generate options in a select drop down

reactjs

redux

redux-form

react-redux