I want browser to show EditMessage
component (in Dashboard.js
) if showEdit
is true (see initState
in MessageReducer.js
) and CreateMessage
component if showEdit
is false but my code doesn't work. My app is not noticing state or props change in Dashboard.js
.
I tried including this.setState
method in Dashboard.js
but I am getting an error: "Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate". I also tried to assign the value of showTypeForm
directly to props and output it (see comments in Dashboard.js
) but this approach didn't work either. I am not sure what lifecycle method to use.
My code looks like this. 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);
There is something wrong in your reducer 'MessageReducer.js'. Here your directly mutating the 'initState' value which is against the reducer function specificataion. It should be a pure function and should not mutate the state, every time it should return a new state object.
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;
You are not updating the state as the props changes, you need to do that in componentDidUpdate with a condition so that it doesn't stuck in infinite loop( "Maximum update depth exceeded). I hope this helps.
Writing this.setState inside render will make you stuck in infinite loop reason being whenever the state changes component renders again.
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.