Question

嗨，所以我试图用setState更新我的redux状态，由于某种原因，它只会保留原始状态，当我用onClick触发setState时，它只会更新该本地状态，而不会更新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;
  }
};`

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

2 个答案: