将组件存储在操作的数组中时是否可以保存组件状态？答案

【问题标题】：Is it possible to save components state when they are stored in an array manipulated?将组件存储在操作的数组中时是否可以保存组件状态？
【发布时间】：2020-08-06 21:09:30
【问题描述】：

我正在尝试创建一个步进表单

我将我的步骤存储在一个带有属性组件（{typeOfComponent，component，key}）的json数组中它运作良好，但是：

每次我对数组进行切片时，例如当我向上/向下移动一个步骤或在两个步骤之间添加一个新步骤时。我丢失了组件内部的状态。

我尝试使用备忘录，我不明白为什么只有当我的组件重新创建项目位置时。是否有可能像 C 中的指针一样只存储他的“地址”

代码沙箱示例 => https://codesandbox.io/s/infallible-maxwell-zkwbm?file=/src/App.js

在我的真实项目中，按钮ADD是选择新步骤类型的按钮

是否有任何解决方案可以在不丢失内部用户数据的情况下操纵我的步骤？

感谢您的帮助

【问题讨论】：

标签： reactjs material-ui react-hooks

【解决方案1】：

React 在每次重新渲染时都会重新安装其中的组件，这可能是由于各种原因。我无法让它按原样工作，但通过从你的组件中提升状态，它会工作。

无论如何，您可能都需要提升状态，因为当用户使用完表单后，数据不在您需要它的位置以对您的表单进行任何使用。

为了提升状态，我将当前值添加到steps数组中：

function addNext(step, index) {
  componentKey++;
  setSteps(prevState => {
    let newState = [...prevState];
    step = 1;
    newState.splice(index + 1, 0, {
      stepNumber: step,
      component: getStepContent(step, componentKey),
      value: getDefaultValue(step),
      key: componentKey
    });
    return newState;
  });
}

我还确保您的 getStepContent 只是返回了组件而不是节点，因此您可以像这样呈现它：

          <step.component
            value={step.value}
            onChange={handleChange}
            data-index={i}
          />

当然，如果您开始遇到性能问题，肯定有很多方法可以优化它。

https://codesandbox.io/s/beautiful-river-2jltr?file=/src/App.js

【讨论】：