尝试使用redux基于api数据创建条件状态

Question

我正试图根据api调用的响应是否为null来找出设置条件模态弹出窗口的最佳方法。我最熟悉的是功能组件，但在这里我使用的是一个作为类组件构建的组件。我想知道我是否可以使用redux存储来设置状态，或者如果有从api调用返回的数据，显示我的UnsignedNoteModal的最佳方式是什么——这是我需要设置条件语句的父组件：

const mapStateToProps = (state, ownProps) => {
return {
permissions: state.common.permissions,
currentUser: state.common.currentUser,
assignedFaxCount: (
get(state.componentData, `${ASSIGNED_FAX_LIST}.data.items`) || []
).filter((i) => !i.complete).length,
unassignedFaxCount: (
get(state.componentData, `${UNASSIGNED_FAX_LIST}.data.items`) || []
).filter((i) => !i.assigned).length,
};
};
const mapDispatchToProps = (dispatch) => ({});
class ProviderDashboard extends Component {
constructor(props) {
super(props);
this.state = { unsignedNote: true };
this.toggle = () => this.setState({ unsignedNote: false });
}
unassignedFaxList() {
return (
<DashboardFaxList
title="Faxes to forward"
getItems={api.Faxes.unassignedFaxes}
currentUser={this.props.currentUser}
listName={UNASSIGNED_FAX_LIST}
viewMode={FAX_VIEW_MODE_ASSIGN}
count={this.props.unassignedFaxCount}
/>
);
}
assignedFaxList() {
return (
<DashboardFaxList
title="Faxes to address"
getItems={api.Faxes.assignedFaxes}
currentUser={this.props.currentUser}
listName={ASSIGNED_FAX_LIST}
viewMode={FAX_VIEW_MODE_COMPLETE}
count={this.props.assignedFaxCount}
/>
);
}
render() {
const canManage = hasPermission(this.props.permissions, PERMISSION_MANAGE);
const canSeePatients = hasPermission(
this.props.permissions,
PERMISSION_SEE_PATIENTS
);
return (
<div>
{this.state.unsignedNote && (
<UnsignedNoteModal
onSubmit={this.toggle}
getList={api.Encounters.unsignedEncounters((e) => e)}

/>
)}
<NavBar />
<div className="dashboard-container">
<h4>
{" "}
<div className="header-icon float-left">
<DashboardIcon />
</div>{" "}
Dashboard{" "}
</h4>
<Row>
<Col md={{ size: 8 }}></Col>
<Col md={{ size: 4 }}>
{canSeePatients && <PrescriptionErrors />}
{canManage && this.unassignedFaxList()}
{(canSeePatients || canManage) && this.assignedFaxList()}
</Col>
</Row>
</div>
</div>
);
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(ProviderDashboard);

现在，我已经设置了该组件中的状态，以显示我一直在构建的模态，但我需要将其更改为仅显示我在UnsignedNoteModal中发送的api调用是否返回null以外的内容。我不确定处理这个问题的最佳途径是什么，从哪里开始或如何处理这个问题都会很棒。

Answer 1

您可以使用"getDerivedStateFromProps"；。您需要设置"；unsignedNote"；作为"；"假/真"；在"；mapStateToProps"；取决于您的API数据。

static getDerivedStateFromProps(nextProps, prevState) {
const {
unsignedNote = false, // Default value is false
} = nextProps;
const {
unsignedNote: unsignedNoteInState = false, //Default value is false
} = prevState;
if(unsignedNote & unsignedNote !== unsignedNoteInState) {
return {
...prevState,
unsignedNote,
}
}
return prevState;
}