Javascript 无法更新道具上的组件或状态更改

如果

showEdit

为true（请参阅

MessageReducer.js

中的

initState

），我希望浏览器显示

EditMessage

组件（在

Dashboard.js

中），如果

showEdit

为false但我的代码不起作用，则显示

CreateMessage

组件。我的应用程序没有注意到

Dashboard.js

中的状态或道具更改

我尝试在

Dashboard.js

中包含

this.setState

方法，但我得到一个错误：“超过了最大更新深度。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。”。 我还尝试将

showTypeForm

的值直接分配给道具并输出（请参见

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); 

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); 

//导入所有内容
类仪表板扩展组件{
状态={
showEdit:this.props.message.showEdit
}
render（）{
const{message}=this.props；//解构
//这是我的国家({
//showEdit:message.showEdit
// })
//const showTypeForm=message.showEdit？：；
返回(
{this.state.showEdit？：}
//{showTypeForm}
)
}
常量mapStateToProps=（状态）=>{
返回{
消息：state.message
}
}
}
导出默认连接（MapStateTops）（仪表板）；

当道具发生变化时，您不会更新状态，您需要在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);

类仪表板扩展组件{
状态={
showEdit:this.props.message.showEdit
}
componentDidUpdate（prevProps）{
if（this.props.message！==prevProps.message）{
这是我的国家({
showEdit:this.props.message.showEdit
})
}
}
render（）{
const{message}=this.props；//解构
//这是我的国家({
//showEdit:message.showEdit
// })
//const showTypeForm=message.showEdit？：；
返回(
{this.state.showEdit？：}
//{showTypeForm}
)
}
常量mapStateToProps=（状态）=>{
返回{
消息：state.message
}
}
}
导出默认连接（MapStateTops）（仪表板）；

您的reducer“MessageReducer.js”中有错误。这里您直接修改了“initState”值，这违反了reducer函数规范。它应该是纯函数，不应该修改状态，每次都应该返回一个新的state对象。
请在MessageReducer.js中使用以下更新的代码进行尝试

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);

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;