通過react-redux connect調用`dispatch`后，如何立即用新道具設置react狀態？

Question

我是React和Redux的新手，正在嘗試建立一個網站。 我正在使用Material-UI組件。 AppSearchBarInput是標題中的輸入，用戶可以在其中搜索ID（在代碼中稱為appId ）。 如果在數據庫中found了appId ，那么我想重定向到另一個頁面（ this.props.history.push('/app/appInfo'); ）。 如果輸入為空，則顯示帶警告消息的小吃欄（ AppNotFound ），以及數據庫中不存在輸入時。

在onKeyDown方法中，我使用connect調度一個操作，該操作檢查id是否存在於數據庫中（使用redux-thunk從getAppInfo調用dispatch ）。 然后，我需要立即通過props獲取新的Redux狀態，以便確定是否找到了ID，並根據此ID將snackBarOpen本地狀態屬性設置為true或false。

問題是調用調度時，我無法在同一方法中獲得更新的道具。 我可以使用componentDidUpdate但是無法從中更新本地存儲。 對於這種情況，是否可以使用一些反應生命周期方法或redux技巧來解決？

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import InputBase from '@material-ui/core/InputBase';
import { withStyles } from '@material-ui/core/styles';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { getAppInfo } from '../../actions/appActions.js';
import constants from '../../constants.js';

import { AppSearchBarInputStyles } from '../styles/Material-UI/muiStyles.js';
import AppNotFound from './AppNotFound.js';

import * as log from 'loglevel';
log.setLevel("debug")


class AppSearchBarInput extends Component {
  state = {
    appId: '',
    snackBarOpen: false
  }

  onChange = e => {
    this.setState({ appId: e.target.value });
  }

  onKeyDown = e => {
    const { appId } = this.state;

    if (e.keyCode === constants.ENTER_KEY) {
      if (appId.trim() !== '') {
        this.props.getAppInfo({ appId });
        this.setState({
          appId: ''
        });

        const { found } = this.props.app; // ! problem here !
        if (found) {
          this.props.history.push('/app/appInfo');
        } else {
          this.setState({
            snackBarOpen: true
          });
        }
      } else {
        this.setState({
          snackBarOpen: true
        });
      }
    }
  }

  handleCloseSnackBar = () => {
    this.setState({
      snackBarOpen: false
    });
  }

  render() {

    const { classes } = this.props;
    const { appId, snackBarOpen } = this.state;
    const { found } = this.props.app;
    let message = '';
    if (!found) {
      message = appId === '' ? constants.MESSAGES.APP_BLANK() : constants.MESSAGES.APP_NOT_FOUND(appId);
    }

    return (
      <div>
        <InputBase
          placeholder="Search…"
          classes={{
            root: classes.inputRoot,
            input: classes.inputInput,
          }}
          onChange={this.onChange}
          onKeyDown={this.onKeyDown}
          value={this.state.appId} />
        <AppNotFound message={message}
                     open={snackBarOpen && !found}
                     onClose={this.handleCloseSnackBar}/>
      </div>
    )
  }
}

AppSearchBarInput.propTypes = {
  classes: PropTypes.object.isRequired
}

const mapStateToProps = state => ({
  app: state.app.app
});

const AppSearchBarWithStyles = withStyles(AppSearchBarInputStyles)(AppSearchBarInput);
const AppSearchBarWithStylesWithRouter = withRouter(AppSearchBarWithStyles);
export default connect(mapStateToProps, { getAppInfo })(AppSearchBarWithStylesWithRouter);

Answer 1

從代碼的外觀來看，您沒有調度方法。 如果確實獲取了數據，那么您不會獲得更新，因為withRouter實際上阻​​止了shouldComponentUpdate。 如果要更新狀態，則將connect封裝在withRouter 。

您還應該具有mapDispatchToProps函數。 像這樣：

const mapDispatchToProps = dispatch => ({
  makeDispatch: () => dispatch({ getAppInfo })
})

因此，代替：

const AppSearchBarWithStyles = withStyles(AppSearchBarInputStyles)(AppSearchBarInput);
const AppSearchBarWithStylesWithRouter = withRouter(AppSearchBarWithStyles);
export default connect(mapStateToProps, { getAppInfo })(AppSearchBarWithStylesWithRouter);

你應該有：

const AppSearchBarWithStyles = withStyles(AppSearchBarInputStyles)(AppSearchBarInput);
AppSearchBarWithStylesWithConnect = connect(mapStateToProps, mapDispatchToProps)(AppSearchBarWithStyles);
export default withRouter(AppSearchBarWithStylesWithConnect);

請查看以下內容： https : //reacttraining.com/react-router/core/api/withRouter