[英]Cannot update component on props or state change
我希望浏览器在showEdit
为true时显示Dashboard.js
EditMessage
组件(请参阅MessageReducer.js
initState
),而在showEdit
为false时显示CreateMessage
组件,但我的代码不起作用。 我的应用未注意到Dashboard.js
状态或道具更改。
我尝试在Dashboard.js
包含this.setState
方法,但出现错误:“超出了最大更新深度。当组件重复在componentWillUpdate或componentDidUpdate内部调用setState时,可能会发生这种情况。” 我还尝试将showTypeForm
的值直接分配给props并将其输出(请参阅Dashboard.js
注释),但是这种方法也不起作用。 我不确定要使用哪种生命周期方法。
我的代码如下所示。 MessageSummary.js:
import React, { Component } from 'react';
import { connect } from 'react-redux';
class MessageSummary extends Component {
editClick = (e) => {
e.preventDefault();
this.props.editMessage('123', 'I love web development'); //test values
}
render() {
return (
<button className="edit-message" onClick={this.editClick}>Edit
Message</button> // this button changes showEdit in MessageReducer.js
)
}
}
const mapDispatchToProps = (dispatch) => {
return {
editMessage: (id, newMessage) => dispatch(editMessage(id, newMessage))
}
}
export default connect(null, mapDispatchToProps)(MessageSummary);
MessageActions.js:
export const editMessage = (id, newMessage) => {
return (dispatch, getState, { getFirebase, getFirestore }) => {
dispatch({
type: "EDIT_MESSAGE"
});
}
}
RootReducer.js:
// importing everything
const rootReducer = combineReducers({
message: messageReducer
});
export default rootReducer;
MessageReducer.js:
const initState = {
showEdit: false
};
const messageReducer = (state = initState, action) => {
switch (action.type) {
case 'EDIT_MESSAGE':
initState.showEdit = !initState.showEdit; // toggling showEdit
return state;
default:
return state;
}
}
export default messageReducer;
Dashboard.js:
// importing everything
class Dashboard extends Component {
state = {
showEdit: this.props.message.showEdit
}
render() {
const { message } = this.props; // destructuring
// this.setState({
// showEdit: message.showEdit
// })
// const showTypeForm = message.showEdit ? <EditMessage /> : <CreateMessage />;
return (
<div className="message-form">
{this.state.showEdit ? <EditMessage /> : <CreateMessage />}
// {showTypeForm }
</div>
)
}
const mapStateToProps = (state) => {
return {
message: state.message
}
}
}
export default connect(mapStateToProps)(Dashboard);
减速器“ MessageReducer.js”中有问题。 在这里,您可以直接更改与reducer函数规格相反的'initState'值。 每次返回一个新的状态对象时,它应该是一个纯函数并且不应该改变状态。
请尝试使用MessageReducer.js中的以下更新代码
const initState = {
showEdit: false
};
const messageReducer = (state = initState, action) => {
switch (action.type) {
case 'EDIT_MESSAGE':
let updatedState = Object.assign({},state,{showEdit:!state.showEdit}) ;
return updatedState;
default:
return state;`enter code here`
}
}
export default messageReducer;
您不会在道具更改时更新状态,您需要在componentDidUpdate中使用条件来做到这一点,以使其不会陷入无限循环(“超过最大更新深度”。我希望这会有所帮助。
在render中写入this.setState将使您陷入无限循环的原因,因为每当状态更改组件再次渲染时。
class Dashboard extends Component {
state = {
showEdit: this.props.message.showEdit
}
componentDidUpdate(prevProps){
if(this.props.message !== prevProps.message){
this.setState({
showEdit: this.props.message.showEdit
})
}
}
render() {
const { message } = this.props; // destructuring
// this.setState({
// showEdit: message.showEdit
// })
// const showTypeForm = message.showEdit ? <EditMessage /> : <CreateMessage />;
return (
<div className="message-form">
{this.state.showEdit ? <EditMessage /> : <CreateMessage />}
// {showTypeForm }
</div>
)
}
const mapStateToProps = (state) => {
return {
message: state.message
}
}
}
export default connect(mapStateToProps)(Dashboard);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.