Question

我有一些问题，我不明白如何解决

我正在使用react-bootstrap选项卡我的标签面板中有3个标签，每个标签中都有一个用于获取数据的api请求。我通过redux动作获取的每个标签数据，所以我有3个redux动作。

在componentDidMount的每个组件上，我正在调度通过api获取数据的操作

一切正常。

但是当一个标签数据请求继续时，我不会阻止单击我的标签。请求完成后，用户可以单击另一个选项卡，在另一个选项卡上将是相同的情况。

我有一个父组件，我的标签导航在其中：

<Tabs
            id="controlled-tab-example"
            activeKey={this.state.key}
            onSelect={key => this.setState({ key })} 
          >
            <Tab eventKey="a" mountOnEnter={true} disabled={this.props.datatableA.isLoaded}  title="Data Table A">
              <DataTableA />
            </Tab>
            <Tab eventKey="b" mountOnEnter={true} disabled={this.props.datatableB.isLoaded} title="Data Table B">
              <DataTableB />
            </Tab>
            <Tab eventKey="c" mountOnEnter={true} disabled={this.props.datatableC.isLoaded}  title="Data Table C">
              <DataTableC />
            </Tab>
          </Tabs>

这是禁用属性，如果要加载数据，则我将禁止有条件地单击我的按钮

let initialState = [{
    isLoaded: false
}]

export default (state = initialState, action) => {
    switch (action.type) {
        case FETCH_DATA_START:
            return {...state, isLoaded: true}
        case FETCH_DATA_SUCCESS:
            return {...state, items: action.payload, isLoaded: false}
        case FETCH_DATA_FAILED: 
            return {...state}
        default:
            return state
    }
}

因此在我的化简器中，如果数据获取开始时我的isLoaded状态为true，那么当成功的isLoaded为false时，按钮被禁用，因此按钮是可单击的。

但是这里的问题是组件一次从商店获取状态，所以当状态在我的商店中更新时，我无法捕获它，并且由于它们，我的有条件渲染无法正常工作。

该怎么做？

Answer 1

内部渲染可解构从mapStateToProps获取的道具

const {dataTableA，dataTableB，dataTableC} = this.props;

然后，在每个选项卡禁用的条件下，都应具有所有三个数据表的已加载条件，以便分派而不返回任何api调用。不应启用任何标签

// this will be changed 
this.props.dataTableA.isLoaded
//to
dataTableA.isLoaded || dataTableB.isLoaded || dataTableC.isLoaded

P。 S还通过在渲染器中添加控制台来检查更改的状态。

React Redux如何使用Redux状态进行条件渲染

1 个答案: