redux表單從嵌套數組中選擇表單值

Question

我首先嘗試使用redux表單來響應應用，我通過遵循redux-form網站上的Field數組示例來完成了圖片JSON結構中的結構

接下來，我遵循：選擇表單值示例以彈出不同的字段。 我從根本上對其進行了測試，並像一種魅力一樣工作。

但是我似乎無法在嵌套數組中彈出值。 任何想法？

我最初是在redux表格github中問這個問題的，並得到了答案：

您需要選擇整個名稱，例如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]中的電子郵件字段也將進行相同的鍵入。

這里的圖片使事情變得清晰，不知道我是否讓自己清晰了。 新問題

Answer 1

我認為您不需要在此處使用反引號進行字符串插值-只需使用這樣的值： name={ tagContainerInfos.hasEmail } 。