Максимальная глубина обновления превышена при использовании Shorttid и реагировать-окончательной формы

Question

Я построил форму реакции-финала, которая будет отображаться на нескольких вкладках. У меня есть компонент 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>
);

. Когда я создаю TabPanel s, я указываю ключ, используя 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

IMHO, это результат использования не чистой функции для генерации ключа (когда item является аргументом). Это необычная ситуация, когда при повторном рендеринге все ключевые элементы удаляются / заменяются новым набором (те же самые элементы с новыми ключами = разные элементы). React, вероятно, [не правильно] классифицирует эту [ситуацию] в результате использования setState.

key должна быть стабильной «ссылкой на запись», чтобы отличать guish разницу между аналогичными элементами ,

Если имена вкладок уникальны , просто используйте их как key:

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

Таким образом key подключается к конкретной записи c. .. реаги будет знать , как оптимально обновить список (при вставке или удалении) без перерисовки всех элементов .