在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 组件 async 和组件直到关闭。 下面分享一下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;
   }
}