Я пишу веб-сайт 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);
Я использовал DotsMobileStepper, определенный в materialUi, однако я переписал его как компонент класса, потому что с функциональным компонентом следующий 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);