如何使用 redux 存儲變量更新 FieldArray 元素

Question

• 我正在使用帶有 FieldArray 的 redux-form。默認情況下，數組中有 1 個元素，它是從 JSON 填充的。 我最多可以在 FieldArray 組件中添加 3 個元素。

• 在下面的代碼中，“elementList”屬性來自 JSON，並且我還存儲了名為“elements”和“elementList”的變量。 我首先使用 JSON 中的 elementList 初始化這些存儲變量，然后在單擊“添加元素”時繼續更新存儲變量。 我可以看到存儲變量正在正確更新，但屏幕上的字段數組元素沒有更新。這可能是因為 FieldArray 中的名稱屬性“elementList”可能引用了 JSON 元素。

  是否有可能，如果我可以在“FieldArray”的名稱屬性中引用存儲變量“elementList”或“elements”。 請指教。

主頁

  <div>
      <FieldArray name="elementList" component={Elements}
                  props={this.props}/>
      <button type="button" className="btn btn-primary"
              onClick={event => this.addElement(elementDTO)}>Add Element
      </button>
      <br/>
  </div>
  
  addElement(elementDTO){
        if(this.props.elements && this.props.elements!=undefined && this.props.elements.length >= 3){
            return;
        }
        this.props.addReqElement(this.props.elements);
    }

字段數組頁面

const elements= ({props, meta: {error, submitFailed}}) => {
    const {fields} = props;
    return (
    {fields.map((element, index) => (
     <div> 
            //Field definitions
     </div>
))}

謝謝

更新：從 Redux Action 和 Reducer 添加方法

 export function addReqElement(childList) {
         let state = store.getState()
         let newChild= 
            state.requestReducer.DTOobj.requestDoc;  //this is an empty element coming from backend with few properties and adding rest of the //proerties as below to create a new child 
        newChild.prop1 = null
        newChild.prop2 = null
        childList.push(newChild)
        return (dispatch) => {
            dispatch(setDoc(childList));
        }
    }
    

export function setDoc(payload) {
    return {
        type: ADD_DOC,
        payload: payload
    }
}

更新 2：我嘗試刪除 push 並使用傳播運算符，但它不起作用。 我也有內部數組，因為我正在使用不同的策略。 我取拉父數組，它是索引並用新的內部數組更新父數組。 它可以工作，但是父數組我不知道我應該如何使它工作。 我試圖將主數組設置為表單道具並通過調度一個動作來呈現整個頁面，但它不起作用。 有什么建議嗎？

從主陣列頁面：

render() {
   const {fields, parentArrayFromStore} = this.props;
    return (
       <div className="col-sm-12">
          {fields.map((doc, index) => (
           <div key={index}>
            <div className="col-sm-12">
              <FieldArray name={`${doc}.innerArrayList`} component={CustomInnerArrayComponent}/>
            </div>
            <div className="row">
               <div className="col-sm-4">
                  <button type="button" className="btn btn-primary"
                          onClick={event => this.addInnerArray(index, parentArrayFromStore ,fields.get(index).innerArrayList)}>Add Printer
                   </button>
                </div>
            </div>
        </div>
    ))}
    </div>)
            }
                
        

在行動 class

export function addInnerArray(index, parentArrayFromStore, innerArrayList) {
    let newInnerItem= {};
    newInnerItem.prop1 = null
    newInnerItem.prop2 = null
   
    innerArrayList.push(newInnerItem)
    parentArrayFromStore[index].innerArrayList = innerArrayList;

    return (dispatch) => {
        dispatch(setParentArray(parentArrayFromStore));
    }
}

export function setParentArray(payload) {
    return {
        type: ADD_DOC,
        payload: payload
    }
}

Answer 1

嗨，問題在於您的 function 中的 push 語句在更新構造函數或減速器中的狀態時使用 concat 或 spread operator[...]> 我在這里做了一個示例，請檢查

onAddItem() {
        let list = [...this.state.items, {text:`Check 1`}];
        this.setState({items:list});
}

在您的情況下，您可以執行以下操作

let arr = [...childList, newChild]

然后發送 arr

 dispatch(setDoc(arr));