如何使用redux存储变量更新FieldArray元素

如何解决如何使用redux存储变量更新FieldArray元素

• 我正在将Redux-form与FieldArray一起使用。默认情况下，数组中将存在1个元素，并且它是从JSON填充的。我最多可以加3 元素在FieldArray组件中。

• 在下面的代码中，“ elementList” 属性来自JSON，而且我有名为 作为“元素”和“元素列表”。我用elementList初始化这些存储变量 首先从JSON开始，然后在'Add 单击元素”。我可以看到商店变量正在更新 正确，但在屏幕上字段数组元素未更新。可能是因为FieldArray中的名称属性'elementList'可能引用了 JSON元素。

  有可能吗，如果我可以在name属性中引用存储变量'elementList'或'elements' 'FieldArray'。请指教。

主页

  <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：我尝试删除推并使用了传播运算符，但是它不起作用。我也有内部数组，因为我正在使用不同的策略，所以正在工作。我将拉父数组，它的索引，并使用新的内部数组更新父数组。它可以工作，但是父数组我没有得到如何使它工作。我试图将主数组设置为props形式，并通过调度一个动作来呈现整个页面，但是它不起作用。有什么建议吗？

在主阵列页面上：

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>)
            }
                
        

行动课

export function addInnerArray(index,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
    }
}

解决方法

嗨，问题在于在构造函数或化简器中使用concat或spread运算符更新状态时函数中的push语句[...]> 我在here上做了一个样本 请检查

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

根据您的情况，您可以执行以下操作

let arr = [...childList,newChild]

然后分派arr

 dispatch(setDoc(arr));