javascript - 在reactjs函数中更新redux，然后使用state

Question

我需要打开一个搜索辅助工具并在那里选择一个值并将其取回。

当我点击按钮时，我打开了一个搜索帮助，我将我选择的数据放入了一个存储中，但是我回来时如何使用它？ 我需要将我从搜索帮助中选择的数据直接写入到前端的输入中。

   async showPopup(){
      const LazyLoadingComponent=await import('../../CP/SearchHelp/searchHelp');
      this.setState({lazyLoadComponent:React.createElement(LazyLoadingComponent.default)});
      await ShowPopup('http://localhost:3070/api/WorkCenter/GetWorkCenters');
      console.log(this.state.selectedRow);
      if(this.state.selectedRow!==''){
        this.setState({WorkCenterCode:this.state.selectedRow.WorkCenterCode});
      }
    }

在某种程度上，我必须等到页面被导入。 在showpopup中，我实际上是通过更新搜索帮助中的redux来显示需要更新的数据。

export async function ShowPopup(apiUrl){
    var apiData=await APIGetWorkCenters(apiUrl);
    SearchHelApiData(await JSON.parse(apiData.data));
    SearchHelPopupOpen(true);
}


export const SearchHelPopupOpen=(popupOpen)=>{
    store.dispatch({
        type:'SearchHelp_popupOpen',
        popupOpen:popupOpen
    });
}

export const SearchHelApiData=(apiData)=>{
    store.dispatch({
        type:'SearchHelp_apiData',
        apiData:apiData
    });
}

在这里，我需要让我的 searchhelp 组件异步和组件直到关闭。 我在下面分享了 searchhelp 组件的代码。

class SearchHelp extends BasePage {

  constructor(props){
    super(props);
    this.connect(['SearchHelp']);
    this.onSelectionChanged = this.onSelectionChanged.bind(this);
  }

  componentDidMount(){
    SearchHelSelectedRow('');
  }


    toggle = () => {
      SearchHelApiData('');
      SearchHelPopupOpen(false);
    }

    onSelectionChanged({ selectedRowsData }) {
      const data = selectedRowsData[0];
      SearchHelSelectedRow(data);
      SearchHelApiData('');
      SearchHelPopupOpen(false);
    }

    render() {
      return (
        <MDBContainer>
          <MDBModal  size="md" isOpen={this.state.popupOpen} toggle={this.toggle} centered backdrop={false}>
            <MDBModalHeader className="" toggle={this.toggle}></MDBModalHeader>
            <MDBModalBody>
            <DataGrid
                dataSource={this.state.apiData}
                selection={{ mode: 'single' }}
                showBorders={true}
                hoverStateEnabled={true}
                keyExpr={'WorkCenterId'}
                onSelectionChanged={this.onSelectionChanged} >
              </DataGrid>
            </MDBModalBody>
          </MDBModal>
        </MDBContainer>
        );
    }
}

我在等你的帮助..

------------编辑------------

我用 componentDidUpdate() 方法解决了我的问题。

  componentDidUpdate(){
      if(this.state.selectedRow!=='' && this.state.selectedRow!==undefined){
        SearchHelSelectedRow('');
        if(this.state.selectedRow.WorkCenterId!==undefined){
        this.setState({WorkCenterCode:this.state.selectedRow.WorkCenterCode});}
        if(this.state.selectedRow.ReasonCode!==undefined){
          this.setState({ReasonCode:this.state.selectedRow.ReasonCode});}
      }
    }

    async showPopupWorkCenter(){
      await ShowPopup('http://localhost:3070/api/WorkCenter/GetWorkCenters');
    }

    async showPopupReasons(){
      await ShowPopup('http://localhost:3070/api/Reason/GetReasons');
    }

Answer 1

为了让您在 SearchHelp 组件中使用 Redux 并获得对 Redux 商店的访问权限，您需要将您的组件连接到商店，但我没有看到您这样做。

您基本上需要三样东西才能让事情正常运行，reducer、actionCreator 和存储状态更改的存储。如果您拥有这些，则必须使用 connect 高阶函数将您的组件连接到商店，该函数接受两个参数并包装您的组件，让您可以访问存储在商店中的数据。

例如，给定您的组件 SearchHelp，您可以通过执行以下操作连接到商店:

import { connect } from 'redux'

class SearchHelp extends BasePage { ... }

function mapStateToProps(state) {
   // this function has access to your redux store, so you can access the properties there
   // it should return an object
   return {
      stateProp1: state.stateProp1,
      stateProp2: state.stateProp2,
      ...
   }
}

function mapDispatchToProps() {
   // this function is not required as you could simply pass in your actions directly
}
export default connect(mapStateToProps, mapDispatchToProps)(SearchHelp)

reducer 示例如下所示:

function reducerName(state = {}, action) {
   switch(action.type) {
      case ACTION_TYPE:
      return { stateProp1: action.data // };
      ...

      default:
      return state;
   }
}