Reactjs 使用shortid和react最终表单时超出最大更新深度

我建立了一个react最终表单，可以跨多个选项卡进行渲染。我有一个

Tabs

组件，它跟踪活动选项卡索引并显示相应的

TabPanel

const App = () => (
  <Styles>
    <Form
      onSubmit={_ => _}
      mutators={{
        ...arrayMutators
      }}
    >
      {({ handleSubmit, submitting, values, form: { mutators } }) => {
        const tabs = [
          {
            tabName: "General",
            tabPanel: <div>I am the general pane</div>
          },
          {
            tabName: "Activity",
            tabPanel: <Activity mutators={mutators} />
          },
          {
            tabName: "Delay reasons",
            tabPanel: <div>I am the delay reasons panel</div>
          }
        ];
        return (
          <form onSubmit={handleSubmit}>
            <Tabs values={tabs} />
          </form>
        );
      }}
    </Form>
  </Styles>
);

更新深度超出错误表示错误发生在

react final form

的

字段中

组件：

The above error occurred in the <Field> component:
    in Field (at ActivityPanel.tsx:39)
    in div (at ActivityPanel.tsx:37)
    in div (created by styled.div)
    in styled.div (at ActivityPanel.tsx:28)

组件中出现上述错误：
现场（在ActivityPanel.tsx:39）
部门内（活动面板tsx:37）
in div（由styled.div创建）
在styled.div中（位于ActivityPanel.tsx:28）

我真的被这个弄糊涂了。。。为什么调用

shortid.generate（）

会导致这种行为？我可以用

key={new Date（）.toString（）}

将其替换掉，表单呈现良好

---

代码沙盒显示问题：

IMHO这是使用非纯函数生成密钥的结果（当项是参数时）在重新加载时，所有键控项都被删除/替换为一组新项（具有新键的相同项=不同项），这是一种不寻常的情况。React Probly[未正确]将此[情况]分类为使用

setState

的结果

键

应该是一个稳定的“记录链接”，以区分相似项目之间的差异

如果选项卡名称是唯一的，只需将其用作键即可：

const tabPanels = props.values.map((value, index) => (
  <TabPanel
    index={index}
    key={value.tabName}

const tabPanels=props.values.map（（值，索引）=>(
const tabPanels = props.values.map((value, index) => (
  <TabPanel
    index={index}
    key={value.tabName}