Обновите приставку в функции responsejs, затем используйте состояние

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 я на самом деле показываю данные, которые необходимо обновить, обновляя редукс в справке по поиску.

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

Чтобы вы могли использовать Redux в своем компоненте SearchHelp и получить доступ к хранилищу Redux, вам необходимо подключить свой компонент к хранилищу, что я не вижу у вас.

Вам нужно три вещи, чтобы все заработало: редуктор, 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)

Пример редуктора выглядит следующим образом:

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

      default:
      return state;
   }
}