Question

App.js包含以下内容：

import React, { Component, Fragment } from "react";
import ReactDOM from "react-dom";
import TextField from '@material-ui/core/TextField';


class App extends Component {

  render() {
    return (
      <TextField id="time" type="time" />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

此错误在浏览器控制台中返回，并且不呈现任何内容：

The above error occurred in the <WithStyles(ForwardRef(TextField))> component:
    in WithStyles(ForwardRef(TextField)) (created by App)
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/docs/error-boundaries.html to learn more about error boundaries. react-dom.development.js:16013:13

TypeError: react__WEBPACK_IMPORTED_MODULE_0___default.a.useContext is not a function main.js line 1932 > eval:9:55
    useTheme webpack:///./node_modules/@material-ui/styles/esm/useTheme/useTheme.js?:9
    makeStyles webpack:///./node_modules/@material-ui/styles/esm/makeStyles/makeStyles.js?:233
    WithStyles webpack:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js?:65
    React 22
        updateForwardRef
        beginWork
        performUnitOfWork
        workLoop
        callCallback
        invokeGuardedCallbackDev
        invokeGuardedCallback
        replayUnitOfWork
        renderRoot
        performWorkOnRoot
        performWork
        performSyncWork
        requestWork
        scheduleWork
        scheduleRootUpdate
        updateContainerAtExpirationTime
        updateContainer
        render
        legacyRenderSubtreeIntoContainer
        unbatchedUpdates
        legacyRenderSubtreeIntoContainer
        render
    <anonymous> webpack:///./leadmanager/frontend/src/components/App.js?:57
    js http://localhost:8000/static/frontend/main.js:97
    __webpack_require__ http://localhost:8000/static/frontend/main.js:20
    <anonymous> webpack:///./leadmanager/frontend/src/index.js?:2
    js http://localhost:8000/static/frontend/main.js:109
    __webpack_require__ http://localhost:8000/static/frontend/main.js:20
    <anonymous> http://localhost:8000/static/frontend/main.js:84
    <anonymous> http://localhost:8000/static/frontend/main.js:87

如果将<TextField id="time" type="time" />替换为<h1>Test</h1>，则应用程序将正常运行。使用复选框等其他组件时，也会产生相同的错误。

是什么原因导致此错误，以及如何使用material-ui组件？

Answer 1

您的<TextField />组件需要包装在<form> </form>内。

查看material-ui

中的官方示例

使用任何material-ui组件都会在<WithStyles（ForwardRef（TextField））>组件中导致错误

1 个答案: