Question

我试图使用redux表单做出反应首先，通过遵循redux-form网站

中的Field数组示例，我在图片JSON structure中进行了结构化

接下来我跟着：选择表单值示例以弹出不同的字段。我在root中测试它并且像魅力一样工作。

但我似乎无法在我的嵌套数组中弹出值。任何想法？

我在redux形式github问这个orginally得到答案：

您需要选择整个名称，例如tagContainerInfos [0] .hasEmail不只是hasEmail。为此，您可能需要将Field数组子项提取到单独的组件中，并在每个组件上单独使用hasEmailValue。

但我真的不明白我应该怎么做。

function myFunction(fields) {
    x++;
    fields.push({})
    console.log(x);
    console.log(fields);
}



let rendertagContainerInfos = ({ fields, meta: { touched, error, submitFailed }, hasEmailValue }) => (
    <ul>
        <li>
            <button type="button" onClick={() => myFunction(fields)}>Add tagContainerInfos</button>
            {(touched || submitFailed) && error && <span>{error}</span>}
        </li>
        {fields.map((tagContainerInfos, index) => (
            <li key={index}>
                <button className="btn btn-lg btn-success"
                    type="button"
                    title="Remove tagContainerInfos."
                    onClick={() => fields.remove(index)}
                />

                <h4>tagContainerInfos #{index + 1}</h4>

                <div>
                    <label>Favorite Color</label>
                    <div>
                        <label htmlFor={`${tagContainerInfos}.hasEmail`}>Has Email?</label>

                        <Field
                            name={"protocolInfos[0].plcInfos[0].tagContainerInfos[" + x + "].hasEmail"}
                            id="hasEmail"
                            component="input"
                            type="checkbox"
                            onClick={() => console.log(tagContainerInfos)}
                        />
                    </div>
                </div>



                {hasEmailValue &&
                    <div>
                        <label>Email</label>
                        <div>
                            <Field
                                name={"protocolInfos[0].plcInfos[0].tagContainerInfos[" + x + "].email"}
                                component="input"
                                type="text"
                                placeholder="Email"
                            />
                        </div>

                    </div>} <Field
                    name={"protocolInfos[0].plcInfos[0].tagContainerInfos[" + x + "].messagetype"}
                    type="text"
                    component={renderField}
                    label="messageType"
                />

                <Field
                    name={"protocolInfos[0].plcInfos[0].tagContainerInfos[" + x + "].interval"}
                    type="text"
                    component={renderField}
                    label="interval"
                />
                <Field
                    name={"protocolInfos[0].plcInfos[0].tagContainerInfos[" + x + "].storageSize"}
                    type="text"
                    component={renderField}
                    label="storageSize"
                />
                <Field
                    name={"protocolInfos[0].plcInfos[0].tagContainerInfos[" + x + "].resetTags"}
                    type="text"
                    component={renderField}
                    label="resetTags"
                />

            </li>
        ))}
    </ul>


);

这是我的连接：

  rendertagContainerInfos = connect(state => {
  // can select values individually

   let hasEmailValue = selector(state, 
   "protocolInfos[0].plcInfos[0].tagContainerInfos[0].hasEmail");
   console.log(hasEmailValue);
   return { 
   hasEmailValue

  };

----------------更新我的代码-------------- 添加函数以在创建数组时每次添加x值。现在它以某种方式工作JSON结构就像它应该的那样。现在的问题是字段似乎是连接的。当我输入一个示例电子邮件字段时，tagContainerInfo [0]中的电子邮件字段也会有相同的输入。

继承人的图片让事情变得清晰不知道我是否清楚自己。 new problem

Answer 1

我认为你不需要在这里使用反向标记进行字符串插值 - 只需使用这样的值：name={ tagContainerInfos.hasEmail }。

redux form从嵌套数组中选择Form值

1 个答案: