什么原因导致react-admin中出现唯一的key prop警告？

Question

在测试反应管理应用程序时，我不断收到此警告：

    Warning: Each child in a list should have a unique "key" prop.

    Check the top-level render call using <SimpleForm>. See https://reactjs.org/link/warning-keys for more information.

      at NumberInput (node_modules/ra-ui-materialui/src/input/NumberInput.tsx:23:14)
      at CoreAdminRoutes (node_modules/ra-core/src/core/CoreAdminRoutes.tsx:18:42)
      at RenderedRoute (node_modules/react-router/lib/hooks.tsx:624:26)
      at Routes (node_modules/react-router/lib/components.tsx:410:3)
      at CoreAdminUI (node_modules/ra-core/src/core/CoreAdminUI.tsx:54:14)
          at div
      at node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:43:23
      at ScopedCssBaseline (node_modules/@mui/material/node/ScopedCssBaseline/ScopedCssBaseline.js:58:44)
      at AdminUI (node_modules/ra-ui-materialui/src/AdminUI.tsx:14:39)
      at ThemeProvider (node_modules/@mui/private-theming/node/ThemeProvider/ThemeProvider.js:39:5)
      at ThemeProvider (node_modules/@mui/system/ThemeProvider/ThemeProvider.js:49:5)
      at ThemeProvider (node_modules/@mui/material/node/styles/ThemeProvider.js:20:14)
      at ThemeProvider (node_modules/ra-ui-materialui/src/layout/Theme/ThemeProvider.tsx:19:13)
      at ResourceDefinitionContextProvider (node_modules/ra-core/src/core/ResourceDefinitionContext.tsx:46:5)
      at NotificationContextProvider (node_modules/ra-core/src/notification/NotificationContextProvider.tsx:8:55)
      at I18nContextProvider (node_modules/ra-core/src/i18n/I18nContextProvider.tsx:13:5)
      at Router (node_modules/react-router/lib/components.tsx:328:13)
      at HistoryRouter (node_modules/ra-core/src/routing/HistoryRouter.tsx:11:13)
      at InternalRouter (node_modules/ra-core/src/routing/AdminRouter.tsx:39:13)
      at BasenameContextProvider (node_modules/ra-core/src/routing/BasenameContextProvider.tsx:12:51)
      at AdminRouter (node_modules/ra-core/src/routing/AdminRouter.tsx:14:12)
      at QueryClientProvider (node_modules/react-query/lib/react/QueryClientProvider.js:45:21)
      at PreferencesEditorContextProvider (node_modules/ra-core/src/preferences/PreferencesEditorContextProvider.tsx:8:60)
      at StoreContextProvider (node_modules/ra-core/src/store/StoreContextProvider.tsx:7:17)
      at CoreAdminContext (node_modules/ra-core/src/core/CoreAdminContext.tsx:54:14)
      at AdminContext (node_modules/ra-ui-materialui/src/AdminContext.tsx:8:62)
      at Admin (node_modules/react-admin/src/Admin.tsx:115:14)
      at App (src/App.js:480:18)

它出现在这段代码中：

    <Create redirect="show">
        <SimpleForm sanitizeEmptyValues warnWhenUnsavedChanges>
            {createInputs(resource, name, "add", permissions)}
        </SimpleForm>
    </Create>

createInputs()

返回一个创建的数组，如下所示：

            components.push(<C {...props} />);

C

是

NumberInput

、

TextInput

或类似的。

当我控制台日志时，它显示 key=null。然而，如果我将其调整为

<C key={null} {...props} />

，那么警告就会消失。

这里发生了什么？有更好的方法来解决它吗？我在react-admin文档中没有看到任何关于关键道具的内容，所以我不确定为什么需要指定它。

Answer 1

react 使用这个唯一键处理 DOM 的每个节点，如果您正在映射数组，则在键属性 [].map(item,i)=>

中给出唯一值