使用shortid和react-final-form时超过最大更新深度

Question

我构建了一个可以跨多个选项卡呈现的react-final-form。我有一个跟踪活动选项卡索引并显示适当TabPanel的Tabs组件。

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

当我创建TabPanel时，我使用shortid.generate()指定了一个键，以便生成一个唯一的值。

const tabPanels = props.values.map((value, index) => (
    // Note that if key is set with shortid, a setState infinite loop
    // error will be thrown
    <TabPanel
      index={index}
      key={shortid.generate()}
      activeTabIndex={activeTabIndex}
    >
      {value.tabPanel}
    </TabPanel>
  ));

更新深度超出错误表示错误发生在react-final-form的Field组件中：

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)

我真的被这个搞糊涂了.为什么调用shortid.generate()会导致这种行为？我可以用key={new Date().toString()}替换它，表单呈现得很好。

显示问题的CodeSandbox：https://codesandbox.io/s/react-final-form-field-arrays-ksx15

Answer 1

这是使用非纯函数生成密钥的结果(当item是一个参数时)。在重新渲染时，所有设置了关键帧的项都被移除/替换为新的集合(具有新关键帧的相同项=不同项)，这是不可能的情况。React可能没有正确地将这种情况归类为使用setState的结果。

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

如果选项卡名是唯一的，则只需将它们用作key

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

这样，key就可以连接到特定的记录...react将知道如何优化地更新列表(在插入或删除时)，而无需重新呈现所有项。