控制台警告由于将额外的相关道具传递给 material ui 通过 Formik Field 自动完成

Question

我收到的警告是

我正在附加一个代码沙箱 link 重现此警告。有人可以解释为什么会出现此警告以及如何消除它： https://codesandbox.io/s/cool-bogdan-6lyxs?file=/src/App.js

Answer 1

该警告实际上与 formik 字段无关，但与您的 FormikAutocomplete 组件的实现有关。

在您的 FormikAutocomplete 中，您正在解构道具：

const FormikAutocomplete = ({ textFieldProps, ...props }) => { ...

因此，props 对象将包含 istesting 的值 true 和 test 的值 testFunc。您不是将 props 对象传播到 material uis Autocomplete 组件的道具中，它不知道如何处理这些道具并且可能将它们传递给 html 元素（在本例中为 div）。你的浏览器不是在 div 上抱怨这些道具，因为它们不属于那里。

解决方法是仅将那些道具传递给由它正确处理的 Autocomplete 或从不应传递的 props 对象中解构道具。

例如，您可以将 FormikAutocomplete 中的代码更改为

const FormikAutocomplete = ({ textFieldProps, istesting, test, ...props }) => {
...

  if (istesting) {
    test();
  }
...
}
``

控制台警告由于将额外的相关道具传递给 material ui 通过 Formik Field 自动完成

Console Warning Due to passing additional irrelevant props to material ui Autocomple via Formik Field

reactjs

material-ui

formik

formik-material-ui