Question

我具有用于导航的以下组件：

import React, { Component } from "react";
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

class TabBar extends Component {
  constructor(props) {
    super(props);

    const noTankAvailable = this.props.tank.tankData.noAssignedTank;
    console.log("noTankAvailable", noTankAvailable);

    if (noTankAvailable === true || noTankAvailable === undefined) {
      this.tabs = [
        { label: "Registration", icon: faSimCard, url: "registration" }
      ];
    } else {
      this.tabs = [
        { label: "Status", icon: faChartBar, url: "status" },
        { label: "History", icon: faHistory, url: "history" },
        { label: "Properties", icon: faSlidersH, url: "properties" }
      ];
    }
    ...
  }
  ...
  render() {
    const { location, match } = this.props;
    const { pathname } = location;
    return (
      <div>
        <Tabs
          className="tabBar"
          contentContainerStyle={tabBarStyles.content}
          inkBarStyle={tabBarStyles.ink}
          tabItemContainerStyle={tabBarStyles.tabs}
          value={pathname}
        >
          {this.renderTabs(match)}
        </Tabs>
      </div>
    );
  }
}

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

export default connect(mapStateToProps)(TabBar);

这是我的redux减速器：

import {
  TANK_REQUEST,
  TANK_FAILURE,
  TANK_SUCCESS,
} from '../actions/tankActions';

const testState = {
  isLoading: false,
  currentTank: "",
  tankData: {}
};

export default (state = testState, action) => {
  switch (action.type) {
    case TANK_REQUEST:
      return Object.assign({}, state, { isLoading: true });
    case TANK_SUCCESS:
      if (action.tankData.length > 0) {
        const currentTank = action.tankData[0];
        const tankData = Object.assign({}, state.tankData, { [currentTank._id]: currentTank, isLoading: false });
        return Object.assign({}, state, { currentTank: currentTank._id, tankData });
      } else {
        const tankData = Object.assign({}, state.tankData, { noAssignedTank: true });
        return Object.assign({}, state, { tankData });
      }
    case TANK_FAILURE:
      return Object.assign({}, state, { currentTank: action.id, isLoading: false, error: action.err });
    default:
      return state
  }
}

给出了以下情形：用户登录时，它将获取API以获取（水）储罐。如果用户没有分配的储罐，则应用程序应重定向到注册视图，并且导航应仅显示“ registration”。

所以我通过一个动作来获取。在我的化简器中，我检查是否有数据，如果没有，我将noAssignedTank: true添加到我的状态。现在，我想在TabBar组件中检查是否为真，并根据此隐藏/显示导航链接。

我的问题是我需要等到TANK_FETCHING_SUCCESS减速器解决后才能检查noAssignedTank是否为真。

您会看到第一个控制台输出是我的console.log("noTankAvailable", noTankAvailable);。因此我的if / else语句不起作用，因为起初它是undefined才获得值。

Answer 1

您必须将this.tabs设置为组件的状态，并在组件的生命周期方法中对其进行更新。

通过附加测试（tankData）确保了对props.tank && props.tank.tankData的检索。

初始状态在props中的构造函数中初始化。

在上一个容器上的引用也保持状态（prevTanData），以便在props更改时进行比较（当存储中的异步值将更新时，redux会通知连接的组件，并调用getDerivedStateFromProps将紧随其后。）

如果prevTankData与nextProps.tank.tankData相同，则我们返回null来告知React不需要更改状态。

请注意，对于React <16版本，您将不得不使用实例方法componentWillReceiveProps而不是静态的getDerivedStateFromProps。

    class TabBar extends Component {
        constructor(props) {
            super(props);
            this.state = {
               tabs: TabBar.computeTabsFromProps(props),
               prevTankData: props.tank && props.tank.tankData,
            };
        };

        static computeTabsFromProps(props) {
            const noTankAvailable = props.tank &&
                                    props.tank.tankData &&
                                    props.tank.tankData.noAssignedTank;
            console.log("noTankAvailable", noTankAvailable);

            if (noTankAvailable === true || noTankAvailable === undefined) {
                return [
                    {
                        label: "Registration",
                        icon: faSimCard,
                        url: "registration"
                    }
                ];
            } else {
                return [
                    { label: "Status", icon: faChartBar, url: "status" },
                    { label: "History", icon: faHistory, url: "history" },
                    { label: "Properties", icon: faSlidersH, url: "properties" }
                ];
            }
        }
        static getDerivedStateFromProps(nextProps, prevState) {
            if ((nextProps.tank && nextProps.tank.tankData) !== prevState.prevTankData) {
                return {
                    prevTankData: nextProps.tank && nextProps.tank.tankData,
                    tabs: TabBar.computeTabsFromProps(nextProps),
                }
            }
            return null;
        }
        render() {
            ...
        }
    }

React / Redux：等待减速器获取道具

1 个答案: