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

我正在试图找出根据api调用的响应是否为空来设置条件模式弹出窗口的最佳方法。我最熟悉功能组件，但这里我使用的是作为类组件构建的组件。我想知道我是否可以使用redux存储设置状态，或者显示我的

unsignednotemodel

的最佳方式是什么，如果api调用返回了数据，这是我需要设置条件语句的父组件：

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);

const-mapStateToProps=（state，ownProps）=>{
返回{
权限：state.common.permissions，
currentUser:state.common.currentUser，
已分配传真计数：(
获取（state.componentData，`${ASSIGNED_FAX_LIST}.data.items`）\\\\[]
).filter（（i）=>！i.complete）.长度，
未分配传真计数：(
获取（state.componentData，`${UNASSIGNED_FAX_LIST}.data.items`）\\\[]
).filter（（i）=>！i.assigned）.长度，
};
};
常量mapDispatchToProps=（调度）=>（{}）；
类ProviderDashboard扩展组件{
建造师（道具）{
超级（道具）；
this.state={unsignedNote:true}；
this.toggle=（）=>this.setState（{unsignedNote:false}）；
}
未分配传真列表（）{
返回(
);
}
已分配传真列表（）{
返回(
);
}
render（）{
const canManage=hasPermission（this.props.permissions，PERMISSION\u MANAGE）；
const canSeePatients=hasspermission(
这个.props.permissions，
允许看病人吗
);
返回(
{this.state.unsignedNote&&(
e） }
/>
)}
{" "}
{" "}
仪表板{“}
{canseepients&}
{canManage&&this.unassignedFaxList（）}
{（canSeePatients | | canManage）&&this.assignedFaxList（）}
);
}
}
导出默认连接(
MapStateTops，
mapDispatchToProps
)（ProviderDashboard）；

---

现在，我在这个组件settup中有状态来显示我一直在构建的模式，但是我需要将它更改为仅显示我在

unsignednotemodel

中发送的api调用是否返回null以外的值。我不确定处理这个问题的最佳途径是什么，任何关于从何处开始或如何解决这个问题的见解都会非常棒。

您可以使用“getDerivedStateFromProps”从道具更新您的状态。根据API数据，您需要在“mapStateToProps”中将“unsignedNote”设置为“false/true”

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;
  }

---

使用“getDerivedStateFromProps”从API接收的道具更新“this.state.unsignedNote”。谢谢你的回复！我理解为什么你会说使用“getDerivedStateFromProps”从道具更新你的状态。我试图弄清楚如何在mapStateToProps函数中将未签名便笺设置为true/false。我应该在MapStateTops函数中进行api调用吗？类似于

unsignedNote:if（api.conferences.unsignedCounters==null）{unsignedNote==false}…等
？@CourtneyJ，那么流将是这样的，1。您调用一个操作来进行API调用，2。操作使用带有API响应的还原器更新Redux存储（可能有数据，也可能没有数据），3。您将以“state”作为“mapstatetops”的参数获取该数据。4.编写逻辑，如
unsignedNote:unsignedEncounters？false:true，
。（如果它是一个数组，则可以根据unsignedEncounters的长度编写逻辑，检查对象是否为空）。