我具有用于导航的以下组件:
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 reducer:
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以获取(水)储罐。如果用户没有分配的储罐,则应用程序应重定向到注册视图,并且导航应仅显示“注册”。
所以我通过一个动作来获取。在我的reducer中,我检查是否有数据,如果没有,我将
noAssignedTank: true
添加到我的状态。我现在想在TabBar组件中检查是否为true,并根据此隐藏/显示导航链接。我的问题是我需要等到
TANK_FETCHING_SUCCESS
减速器解决后才能检查noAssignedTank
是否为真。您可以看到第一个控制台输出是我的
console.log("noTankAvailable", noTankAvailable);
。所以我的if / else语句不起作用,因为起初它是undefined
才获得值。 最佳答案
您必须将this.tabs
设置为组件的状态,并在组件的生命周期方法中对其进行更新。
已通过附加测试(tankData
)确保了props.tank && props.tank.tankData
的检索。
初始状态在props的构造函数中初始化。
当props更改时(在更新存储中的异步值时,redux会通知连接的组件,并且随后将调用getDerivedStateFromProps),上一个tank上的引用也保持状态(prevTanData
)以进行比较。
如果prevTankData
与nextProps.tank.tankData
相同,则返回null告诉React不需要更改状态。
请注意,对于React 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() {
...
}
}