2

我构建了一个 react-final-form 可以跨多个选项卡呈现。我有一个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>
);

当我创建TabPanels 时，我指定一个键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'sField组件中：

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

4

1 回答 1

0

恕我直言，这是使用非纯函数生成密钥的结果（当 item 是参数时）。当重新渲染时，所有键项都被删除/替换为新集合（具有新键的相同项=不同项），这是不寻常的情况。React 可能 [不正确] 将这种 [情况] 归类为使用setState.

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

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

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

这种方式key连接到特定的记录...... react 将知道如何在不重新渲染所有项目的情况下以最佳方式更新列表（插入或删除）。

于 2020-04-07T00:34:32.743 回答