Reduxのフォームネストされた配列からフォーム値の選択

Question

イムは最初 を形成します他のフィールドをポップアップ表示させることができます。私はそれをルートでテストし、魅力的に働きました。

しかし、私の値はネストされた配列にポップアップ表示されるようです。

iはorginally 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 

    }; 

---------------- ----------- MY CODEを更新しました--- は、配列作成時に毎回x値を追加する機能を追加しました。 これは何とかJSON構造が動作するようになっています。今問題は、フィールドが接続されているように見えることです。 1つの例の電子メールフィールドに入力すると、tagContainerInfo [0]の電子メールフィールドも同じ入力をします。

heres picture私は自分自身を明確にしたかどうかは分かりません。 new problem

Answer 1

ここで文字列補間にバックティックを使用する必要はありません。name={ tagContainerInfos.hasEmail }のような値を使用してください。