Javascript 如何在多步骤表单中使用redux和react来管理表单状态？

我正在处理react多步骤表单项目（签出步骤）。当用户单击某个步骤（例如礼品包装部分）时，redux状态将显示为true，如果单击其他步骤的表单，则状态将为false。我使用它来控制是否在特定页面上显示详细信息。例如，当用户转到下一步并返回页面时，如果用户先前键入了礼品信息，则输入字段将从redux存储分配值到

当用户停留在特定页面上时，他们将能够成功地编辑和保存表单（我使用redux创建编辑和保存功能，并将礼物信息保存到对象中）。但是，当用户进入下一步并单击返回到某个页面时，该页面似乎重新呈现了一个新表单，并且redux存储仍然保存了我以前保存的信息，但是当我编辑并保存数据时，整个信息将保存为一个新对象，该对象将应用redux的新编辑和保存功能，因此存储阵列将包含重复的对象

我想问一下，对于这种情况，什么是更好的解决方案

onClickBack() {
    const { currentStep } = this.state;
    if (currentStep === 0) {
      this.setState({ showback: false});
    } else {
      if (currentStep === 3) {
        if(this.props.contacts != null){
          this.props.showDetail(); // state turns to true on step 3
        }
      } else {
        this.props.hideDetail();
      }
    }
  }

全局单击返回功能

saveGiftOption(e, index) {
      this.setState({ showhidedetail: !this.state.showhidedetail });
        e.preventDefault();
        let cartamount = 0;
        cartamount = parseInt(this.state.boxvalue.substring(1));
        let msg = {}; // the whole object will be saved into the redux array
        msg = {
            id: this.props.item.id,
            itemName: this.props.item.name,
            giftmessagevalue: this.state.giftmessagevalue,
            boxvalue: this.state.boxvalue,
            name: this.state.name,
            email: this.state.email,
            phone: this.state.phone,
            address: this.state.address,
            cartamount: cartamount,
        }
        Promise.all([
            this.props.addReducer(msg, index) // save action
        ]).then(() => {
            let payload = 0;
            payload = msg.cartamount;
            this.props.sumTotal(payload);
            this.props.sumArrayTotal(payload);
        });
    }

editGiftOption(e, index){
    this.setState({ showhidedetail: !this.state.showhidedetail });
    e.preventDefault();
    Promise.all([
        this.props.clearReducer(index) // clear action
    ]).then(() => {
        this.props.counter.counter -= this.props.counter.arr[index];
        this.props.clearTotal(index);
    });
}

保存并单击步骤3表单上的函数

switch (action.type) {
    case TYPE_ADD: // addReducer
      return [...state,
        Object.assign({}, action.msg)]
    case TYPE_CLEAR: // clearReducer
      return state.filter((data, i) => i !== action.id);
    default:
      return state
  }

添加和编辑减速器

contacts: [
    { id: '0c29c778', itemName: 'A item', giftmessagevalue: 'thankyou', ... },
    { id: '189377ad', itemName: 'B item', giftmessagevalue: 'test', ... },
    { id: '0c29c778', itemName: 'A item', giftmessagevalue: 'thankyou', ... },
    { id: '189377ad', itemName: 'B item', giftmessagevalue: 'test', ...}]
// first 2 object created when user stays on the certain page
// last 2 object created when user go to the next page  and go back to the certain page and edit the form

---

更好的方法是使用redux form（）来管理redux中的表单状态。它允许在redux存储中保存托管表单状态。如果用户在表单之间切换，则可以使用保存的信息重新初始化表单

一般来说，这里的问题是状态未正确恢复/设置。要添加项目的减速器部件无法按预期工作：

返回[…状态， Object.assign（{}，action.msg）]

---

您可以看到，[{id:“aa”}，{id:“aa”}]不能合并到[{id:“aa”}]，因为它们是不同的对象。

我认为最好的方法是使用“react final form”包。由于redux不是在其他位置可用的情况下存储信息的地方。请记住，react redux表单特别说明不要使用它，而要使用react final formsure，这取决于项目。如果是一个新项目，我也会推荐最终形式；）@Alexander Hemming感谢您提供的建议，我将研究redux表单和redux最终表单包。@motou是的，我认为问题在于，如果在表单之间切换，数组将在其中存储所有新对象，而不会注意到其中有重复的对象。