setState可以工作但是当onClick被触发时，redux状态不会被更新

Question

嗨所以我试图用setState更新我的redux状态，并且由于某种原因它只会保持原始状态，当我有一个关闭setState的onClick时它只更新那个本地状态并且它不会更新redux状态和它只是保持原始状态。

`class SubMenu extends Component {
  state={
    displayMenu: ''
  }
componentDidMount() {
  this.props.menuLayout(this.state.displayMenu)
}
  render() {
    return (
      <div className={`${display}`}>
        Sub menu
         <ul>
          <li onClick={() => {
            this.setState({
              displayMenu: 'd-none'
            })
          }}>
            Link1
          </li>
        </ul>
      </div>
    )
  }
}`

`export default connect(mapStateToProps, { menuLayout})(SubMenu);`

这是我的动作创作者

`export const menuLayout = layout => {
    return {
        type: MENU_LAYOUT,
        payload: layout
    }
}`

这是我的减速机

`export default (state = "", action) => {
  switch (action.type) {
    case "MENU_LAYOUT":
      return action.payload
    default:
      return state;
  }
};`

Answer 1

问题出在你的生命周期事件上。 看起来你正试图执行你的流程

componentDidMount()

此功能的本质是它只会在您的组件安装后立即执行，而不会再次执行。 因此，就像现在一样，您设置的onClick事件将无法更新您的redux状态。

您需要设置一个额外的onChange事件处理程序，该处理程序将调用您的menuLayout操作创建者。

Answer 2

你的减速机应该是

export default (state = "", action) => {
  switch (action.type) {
    case "MENU_LAYOUT":
      return Object.assign({}, state, {
        displayMenu: action.payload
      })
    default:
      return state;
  }
};`