Javascript 超过最大更新深度-ReactJS
我正在使用MERN堆栈构建一个应用程序,现在它只搜索数据库中的一些数据并将其打印到页面上,但在运行代码时,我遇到了以下错误: 错误:超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时,可能会发生这种情况。React限制嵌套更新的数量以防止无限循环 它说它来自Module../src/index.js,但我看不出有任何问题Javascript 超过最大更新深度-ReactJS,javascript,reactjs,Javascript,Reactjs,我正在使用MERN堆栈构建一个应用程序,现在它只搜索数据库中的一些数据并将其打印到页面上,但在运行代码时,我遇到了以下错误: 错误:超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时,可能会发生这种情况。React限制嵌套更新的数量以防止无限循环 它说它来自Module../src/index.js,但我看不出有任何问题 3 | import App from "./App"; 4 | i
3 | import App from "./App";
4 | import * as serviceWorker from "./serviceWorker";
5 |
> 6 | ReactDOM.render(
7 | <React.StrictMode>
8 | <App />
9 | </React.StrictMode>,
我认为它可能来自一个函数或组件上的一个动作,但也看不到任何无限循环。经过一些测试,我发现它在调用此组件时被触发:
./src/components/EntryModal.js
import React, { Component } from "react";
import {
Button,
Modal,
ModalBody,
ModalHeader,
Form,
FormGroup,
// FormFeedback,
Label,
Input,
NavLink,
} from "reactstrap";
import { connect } from "react-redux";
import { addEntry } from "../actions/obsActions";
import { clearErrors } from "../actions/errorActions";
import PropTypes from "prop-types";
export class EntryModal extends Component {
state = {
modal: false,
horaLeitura: [],
pressaoAtm: 0,
tempAr: 0,
tempMin: 0,
tempMax: 0,
umidRel: 0,
umidMin: 0,
radGlobal: 0,
chDia: 0,
ventoInten: 0,
ventoDirecao: "",
};
static propTypes = {
error: PropTypes.object.isRequired,
clearErrors: PropTypes.func.isRequired,
};
componentDidUpdate(prevProps) {
const { error } = this.props;
if (error !== prevProps.error) {
// Check for register error
if (error.id === "LOGIN_FAIL") {
this.setState({ msg: error.msg.msg });
} else {
this.setState({ msg: null });
}
}
this.toggle();
}
toggle = () => {
// Clear errors
this.props.clearErrors();
this.setState({
modal: !this.state.modal,
});
};
onChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
onSubmit = (e) => {
e.preventDefault();
const {
horaLeitura,
pressaoAtm,
tempAr,
tempMin,
tempMax,
umidRel,
umidMin,
radGlobal,
chDia,
ventoInten,
ventoDirecao,
} = this.state;
const newEntry = {
horaLeitura,
pressaoAtm,
tempAr,
tempMin,
tempMax,
umidRel,
umidMin,
radGlobal,
chDia,
ventoInten,
ventoDirecao,
};
// Add Entry via addEntry action
this.props.addEntry(newEntry);
};
render() {
return (
<div>
<NavLink onClick={this.toggle} href="#">
Inserir dados
</NavLink>
<Modal isOpen={this.state.modal} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>Inserir observação</ModalHeader>
<ModalBody>
<Form onSubmit={this.onSubmit}>
<FormGroup>
<Label className="lead">Horário local da leitura</Label>
<Input
type="datetime"
name="horaLeitura"
id="hora-leitura"
placeholder="15jan2019/14:30h"
onChange={this.onChange}
/>
<Label className="lead">Pressão atmosférica</Label>
<Input
type="text"
name="pressaoAtm"
id="pressao-atm"
placeholder="1012.9"
onChange={this.onChange}
/>
<Label className="lead">Temperaturas (ar/min/max)</Label>
<Input
type="text"
name="tempAr"
id="temp-ar"
className="temperatura"
placeholder="°C ar"
onChange={this.onChange}
/>
<Input
type="text"
name="tempMin"
id="temp-min"
className="temperatura"
placeholder="mínima"
onChange={this.onChange}
/>
<Input
type="text"
name="tempMax"
id="temp-max"
className="temperatura"
placeholder="máxima"
onChange={this.onChange}
/>
<Label className="lead">Umidade (relativa/mín)</Label>
<Input
type="number"
name="umidRel"
id="umid-rel"
placeholder="relativa"
onChange={this.onChange}
/>
<Input
type="number"
name="umidMin"
id="umid-min"
placeholder="mínima"
onChange={this.onChange}
/>
<Label className="lead">Radiação solar global</Label>
<Input
type="number"
name="radGlobal"
id="rad-global"
placeholder="399"
onChange={this.onChange}
/>
<Label className="lead">Chuva acumulada no dia</Label>
<Input
type="text"
name="chDia"
id="ch-ac-dia"
placeholder="dia"
/>
<Label className="lead">Vento (intensidade/direção)</Label>
<Input
type="text"
name="ventoInten"
id="vento-inten"
placeholder="intensidade"
onChange={this.onChange}
/>
<Input
type="select"
name="ventoDirecao"
id="vento-dir"
placeholder="direção"
onChange={this.onChange}
>
<option value="opt-E">E: este/leste</option>
<option value="opt-N">N: norte</option>
<option value="opt-O">O: oeste</option>
<option value="opt-S">S: sul</option>
<option value="opt-NE">NE: nordeste</option>
<option value="opt-NO">NO: noroeste</option>
<option value="opt-SE">SE: sudeste</option>
<option value="opt-SO">SO: sudoeste</option>
<option value="opt-ENE">ENE: lés-nordeste</option>
<option value="opt-ESE">ESE: lés-sudeste</option>
<option value="opt-SSE">SSE: sul-sudeste</option>
<option value="opt-NNE">NNE: nor-nordeste</option>
<option value="opt-NNO">NNO: nor-noroeste</option>
<option value="opt-SSO">SSO: sul-sudoeste</option>
<option value="opt-OSO">OSO: oés-sudoeste</option>
<option value="opt-ONO">ONO: oés-noroeste</option>
</Input>
<Button style={{ marginTop: "2rem" }} color="secondary" block>
Gravar dados
</Button>
</FormGroup>
</Form>
</ModalBody>
</Modal>
</div>
);
}
}
const mapStateToProps = (state) => ({
entry: state.entry,
error: state.error,
});
export default connect(mapStateToProps, { addEntry, clearErrors })(EntryModal);
我对React、Redux和其他方面有点陌生,所以如果你能解释错误及其解决方案,那就太棒了。你称之为componentDidUpdate。在componentDidUpdate中切换,它修改状态,导致重新渲染,因此componentDidUpdate再次运行,修改状态。。。。这是无限循环。不要在componentDidUpdate中使用This.toggle函数,因为当调用它时,状态会被更新,因此componentDidUpdate会被一次又一次调用,这会导致无限循环改用This.toggle在某些按钮或componentDidMount上使用