我正在编写一个React网站并出现以下错误：
Objects are not valid as a React child (found: object with keys {$$typeof, render, propTypes, displayName, handleNext, handleBack, activeStep, Naked, options, useStyles}). If you meant to render a collection of children, use an array instead. in Unknown (at EmergencyDetails/index.js:109) in SOS (created by Context.Consumer) in withRouter(SOS) (created by Context.Consumer) in Route (at App.js:34) in Router (created by BrowserRouter) in BrowserRouter (at App.js:32) in App (at withRoot.js:12) in ThemeProvider (at withRoot.js:9) in WithRoot (at src/index.js:7)
▶ 28 stack frames were collapsed.
Module../src/index.js
C:/Users/Alexa/Documents/Repository/mpd-airbus-frontend/src/index.js:7
4 | import App from './App';
5 | import * as serviceWorker from './serviceWorker';
6 |
> 7 | ReactDOM.render(<App />, document.getElementById('root'));
8 |
9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
View compiled
__webpack_require__
C:/Users/Alexa/Documents/Repository/mpd-airbus-frontend/webpack/bootstrap:781
778 | };
779 |
780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 782 |
783 | // Flag the module as loaded
784 | module.l = true;
View compiled
fn
C:/Users/Alexa/Documents/Repository/mpd-airbus-frontend/webpack/bootstrap:149
146 | );
147 | hotCurrentParents = [];
148 | }
> 149 | return __webpack_require__(request);
| ^ 150 | };
151 | var ObjectFactory = function ObjectFactory(name) {
152 | return {
View compiled
0
http://localhost:3000/static/js/main.chunk.js:5393:18
__webpack_require__
C:/Users/Alexa/Documents/Repository/mpd-airbus-frontend/webpack/bootstrap:781
778 | };
779 |
780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 782 |
783 | // Flag the module as loaded
784 | module.l = true;
View compiled
checkDeferredModules
C:/Users/Alexa/Documents/Repository/mpd-airbus-frontend/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
| ^ 46 | }
47 | }
48 | return result;
View compiled
Array.webpackJsonpCallback [as push]
C:/Users/Alexa/Documents/Repository/mpd-airbus-frontend/webpack/bootstrap:32
29 | deferredModules.push.apply(deferredModules, executeModules || []);
30 |
31 | // run deferred modules when all chunks ready
> 32 | return checkDeferredModules();
| ^ 33 | };
34 | function checkDeferredModules() {
35 | var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:57
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.
这是我的SOS / index.js文件，在其中渲染DotsMobileStepper并传递handleNext和handleBack。
import React from 'react';
import axios from 'axios';
import { withRouter } from 'react-router-dom';
import { Container } from '@material-ui/core';
import { Header } from '../Layout';
import FormPersonType from './FormPersonType';
import FormEmergencyType from './FormEmergencyType';
import Textbox from './Textbox';
import AppContext from '../utils/AppContext';
import CONST from '../utils/Constants';
import DotsMobileStepper from './DotsMobileStepper';
class SOS extends React.Component {
static contextType = AppContext;
constructor(props) {
super(props);
this.state = {
timerOn: false,
componentType: 'type_of_emergency', //type_of_person //texbox
ambulance: false,
fire_service: false,
police: false,
car_service: false,
meAffected: false,
anotherPerson: false
};
this.handleNext = this.handleNext.bind(this);
this.handleBack = this.handleBack.bind(this);
this.handleEmergencyType = this.handleEmergencyType.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
showSettings(event) {
event.preventDefault();
}
handleNext(e) {
if (this.state.componentType === 'type_of_emergency') {
this.setState({ componentType: 'type_of_person' });
} else if (this.state.componentType === 'type_of_person')
this.setState({ componentType: 'textbox' });
else if (this.state.componentType === 'textbox')
this.props.history.push('/transmitted_data');
}
handleBack(e) {
if (this.state.componentType === 'textbox') {
this.setState({ componentType: 'type_of_person' });
} else if (this.state.componentType === 'type_of_person') {
this.setState({ componentType: 'type_of_emergency' });
} else if (this.state.componentType === 'type_of_emergency')
this.props.history.push('/emergency_sent');
}
handleEmergencyType(new_emergency_state) {
console.log(new_emergency_state);
this.setState(new_emergency_state);
}
onSubmit(e) {
console.log('in OnSubmit');
axios
.post(CONST.URL + 'emergency/create', {
id: 1,
data: this.state
})
.then(res => {
console.log(res);
console.log(res.data);
})
.catch(err => {
console.log(err);
});
}
render() {
let component;
if (this.state.componentType === 'type_of_emergency') {
component = (
<FormEmergencyType
handleComponentType={this.handleComponentType}
handleEmergencyType={this.handleEmergencyType}
emergencyTypes={this.state}
timerStart={this.timerStart}
onSubmit={this.onSubmit}
/>
);
} else if (this.state.componentType === 'type_of_person') {
component = (
<FormPersonType
handleComponentType={this.handleComponentType}
personTypes={this.state}
/>
);
} else if (this.state.componentType === 'textbox') {
component = <Textbox handleFinished={this.handleFinished} />;
}
return (
<React.Fragment>
<Header title="Specify Details" />
<Container component="main" maxWidth="sm">
{component}
</Container>
<DotsMobileStepper
handleNext={this.handleNext}
handleBack={this.handleBack}
activeStep={this.state.onBoardingProgress}
/>
</React.Fragment>
);
}
}
export default withRouter(SOS);
我使用了materialUi中定义的DotsMobileStepper，但是我将其重写为一个类组件，因为使用此功能组件，this.props.handle下一个无法正常工作，因为我需要在SOS / index.js中处理此问题。文件。
DotsMobileStepper.js
import React from 'react';
import { makeStyles, useTheme, withStyles } from '@material-ui/core/styles';
import MobileStepper from '@material-ui/core/MobileStepper';
import Button from '@material-ui/core/Button';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
const useStyles = makeStyles({
root: {
maxWidth: 400,
flexGrow: 1
}
});
class DotsMobileStepper extends React.Component {
constructor(props) {
super(props);
this.classes = props.classes;
}
// const classes = useStyles();
render() {
var theme = useTheme();
const [activeStep] = React.useState(0);
return (
<MobileStepper
variant="dots"
steps={6}
position="static"
//activeStep={this.props.activeStep}
activeStep={activeStep}
className={this.classes.root}
nextButton={
<Button
size="small"
// onClick={this.props.handleNext.map(this.bind(this))} //this.props.buildings.map(this.renderBuildings.bind(this)
disabled={activeStep === 3}
>
Next
{theme.direction === 'rtl' ? (
<KeyboardArrowLeft />
) : (
<KeyboardArrowRight />
)}
</Button>
}
backButton={
<Button
size="small"
onClick={this.props.handleNext.map(this.bind(this))}
disabled={activeStep === 0}
>
{theme.direction === 'rtl' ? (
<KeyboardArrowRight />
) : (
<KeyboardArrowLeft />
)}
Back
</Button>
}
/>
);
}
}
export default withStyles(DotsMobileStepper);
答案 0 :(得分：0)
错误非常明显，您在该代码中的某个位置，在渲染函数中返回了Javascript对象。
我的建议？逐段删除util，您发现罪魁祸首在哪里。