reactjs - 控制台警告由于通过 Formik 字段将其他不相关的道具传递给材质 ui Autocomple

Question

我收到的警告是

我附上了一个重现此警告的代码沙箱链接。有人可以解释为什么会出现此警告以及如何摆脱它： 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对象传播到材料 uisAutocomplete组件的道具中，该组件不知道如何处理这些道具，并且可能将它们传递给呈现的 html 元素（在这种情况下为 div ）。您的浏览器不会在 上抱怨这些道具div，因为它们不属于那里。

解决方法是只将那些道具传递给Autocomplete它正确处理的道具，或者将道具props从不应该传递的对象中解构出来。

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

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

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