reactjs - Redux-Persist 在应用程序重新水合后更改状态

Question

从事类似于 Jotform 的工作。

这是我的状态：

const InitialState = {
  BaseContainerEl: []
}

这是我的方法，假设我想创建全名字段（即三个输入，名字、中间名和姓氏）。因此，我创建了一个呈现 p-tag 的组件并 onClick 它运行 updateBase 函数，我将确切的结果（即 3 个输入）存储在变量“el”中，并使用创建并存储在其中的虚拟 DOM 更新状态'埃尔'。 它工作正常，因为在更新状态后我渲染了元素。

const FullName = (props: any) => {

  const updateBase = () => {
    const key = uuidv4();
    const el = (
      <BaseContainer key={key} id={key}>
        <InputCustom
          placeholder='First Name'
          type='text'
          label='First Name'
          formControl='form-control form-control-sm'
          style={{ width: '90%' }}
        />
        <InputCustom
          placeholder='Middle Name'
          type='text'
          label='Middle Name'
          formControl='form-control form-control-sm'
          style={{ width: '90%' }}
        />
        <InputCustom
          placeholder='Last Name'
          type='text'
          label='Last Name'
          formControl='form-control form-control-sm'
          style={{ width: '90%' }}
        />
      </BaseContainer>
    );

    props.updateBaseContainerEl(el)
  }
  return (
    <p draggable onClick={updateBase} className="text-muted" style={{
      borderRadius: '2px',
      boxShadow: ' 20px 20px 60px #bebebe-20px -20px 60px #ffffff',
    }}>
      <i className="fe fe-user" style={{
      }}></i>
      Full Name
    </p>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

这就是问题所在：我正在使用 redux-persit 保持状态，现在当我刷新应用程序时，它会重新水化，并且在重新水化后，存储在状态中的虚拟 DOM（即反应组件）会发生变化，并且缺少一些属性和值。根据 redux-persist 文档，javascript 中有一些值不能用 json 表示。

所以，它出错了：Uncaught Error: Objects are not valid as a React child (found: object with keys {type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.

下面是补液前后的样子。

有没有办法解决？

标签： reactjsreduxredux-persist