無法更新道具或狀態更改上的組件

Question

我希望瀏覽器在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); 

Answer 1

減速器“ 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;

Answer 2

您不會在道具更改時更新狀態，您需要在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);