我正在编写一个React网站并收到以下错误消息:
Objects are not valid as a React child (found: object with keys {$$typeof, render, propTypes, displayName, onSubmit, Naked, options, useStyles}). If you meant to render a collection of children, use an array instead.
in Unknown (at Landing/index.js:93)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at Landing/index.js:88)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at Landing/index.js:82)
in Landingpage (created by WithStyles(Landingpage))
in WithStyles(Landingpage) (created by Context.Consumer)
in Route (at App.js:34)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:33)
in App (at withRoot.js:12)
in ThemeProvider (at withRoot.js:9)
in WithRoot (at src/index.js:7)
我认为这与我在仍然调用props.history时不使用withroot有关。但是,我尝试通过使用connect方法来更改此方法,该方法也无法正常工作,如您在此处看到的:React: applying styles and using connect()
在这里您看到我的src / Landing / index.js文件:
import React from 'react';
import { Button, Grid } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
import AppContext from '../utils/AppContext';
import { Header } from '../Layout';
import SOSButton from './SOSButton';
import axios from 'axios';
import CONST from '../utils/Constants';
const styles = theme => ({
container: {
alignItems: 'center',
// background: 'white',
border: 'black',
'border-width': 'medium',
'margin-top': '80px',
background: 'rgba(255, 255, 255, 0.8)',
'border-radius': '20px'
},
item: {
// background: 'red',
width: '100%',
//background: 'white',
'text-align': 'center',
'border-radius': '5px',
'margin-top': '10px'
},
sosbutton: {
background: 'red',
'text-align': 'center',
'margin-top': '30px',
height: '80%',
width: '100%'
}
});
class Landingpage extends React.Component {
static contextType = AppContext;
constructor(props) {
super(props);
this.classes = props.classes;
this.state = {};
this.handleDirectSOS = this.handleDirectSOS.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
componentDidMount() {
console.log(this.context);
if (this.context.onBoardingStatus === false) {
console.log('IN IF');
this.props.history.push('/onboarding');
}
}
handleDirectSOS() {
console.log('direct SOS');
this.props.history.push('/emergency_sent');
}
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() {
console.log('direct SOS');
return (
<React.Fragment>
<Header title="Send out SOS" />
<Grid
container
className={this.classes.container}
direction="column"
spacing={2}
>
<Grid
item
sm={12}
className={(this.classes.item, this.classes.forwardbutton)}
>
<SOSButton onSubmit={this.onSubmit} />
</Grid>
</Grid>
</React.Fragment>
);
}
}
export default withStyles(styles)(Landingpage);
在这里您看到我的src / Landing / SOSButton.js文件:
import React from 'react';
//import { withRouter } from 'react-router-dom';
import Button from '@material-ui/core/Button';
import { withStyles } from '@material-ui/core/styles';
//import { connect } from 'react-redux';
const styles = theme => ({
sosbutton: {
background: 'e45050ff',
'text-align': 'center',
'margin-top': '30px',
height: '80%',
width: '100%'
}
});
class SOSButton extends React.Component {
constructor(props) {
super(props);
this.classes = props.classes;
this.state = {
timerOn: false
};
this.timerStart = this.timerStart.bind(this);
this.timerStop = this.timerStop.bind(this);
this.tick = this.tick.bind(this);
this.counter = 3;
this.counterStep = 1;
}
timerStart() {
this.timerID = setInterval(() => this.tick(), 1000);
this.setState({ timerOn: true });
}
timerStop() {
clearInterval(this.timerID);
this.counter = 3;
this.setState({ timerOn: false });
this.props.history.push('/');
}
tick() {
this.counter = this.counter - this.counterStep;
if (this.counter <= 0) {
this.setState({ timerOn: false });
this.timerStop();
this.props.onSubmit();
this.props.history.push('/emergency_sent');
} else {
this.setState({ timerOn: true });
}
console.log(this.counter);
}
render() {
let timerOn = this.state.timerOn;
let button;
if (timerOn) {
button = (
<div>
You have {this.counter} seconds to cancel the emergency SOS. <br />
<br />
<Button size="large" color="primary" onClick={this.timerStop}>
Press here to cancel emergency call!
</Button>
</div>
);
} else {
button = (
<Button className={this.classes.sosbutton} onClick={this.timerStart}>
GET HELP NOW!
</Button>
);
}
console.log(button);
return button;
}
}
//export default withRouter(connect()(withStyles(styles)(SOSButton)));
export default withStyles(SOSButton);
谢谢您的帮助!
答案 0 :(得分:0)
这可能是因为JSX元素中呈现的项目是对象而不是基元
查看:: :: https://spin.atomicobject.com/2018/08/20/objects-not-valid-react-child/