尝试使用redux根据api数据做出条件状态

Posted 2023-02-23

【中文标题】尝试使用redux根据api数据做出条件状态

【英文标题】：Trying to make a conditional state based on api data using redux

【发布时间】：2021-01-21 14:32:55

【问题描述】：

我试图找出基于天气设置条件模式弹出窗口的最佳方法，来自 api 调用的响应是否为空。我最熟悉功能组件，但在这里我使用的是作为类组件构建的组件。我想知道我是否可以使用 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 以外的其他内容。我不确定处理这个问题的最佳途径是什么，任何关于从哪里开始或如何解决这个问题的见解都会很棒。

【问题讨论】：

使用“getDerivedStateFromProps”从您从 API 收到的道具中更新“this.state.unsignedNote”。 reactjs.org/docs/…

【参考方案1】：

您可以使用“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”从道具更新你的状态。我试图弄清楚如何在我的 mapStateToProps 函数中将未签名的注释设置为真/假。我应该在 mapStateToProps 函数中进行 api 调用吗？喜欢unsignedNote: if(api.Encounters.unsignedEncounters === null) unsignedNote === false...etc？

@CourtneyJ，所以流程是这样的，1. 你调用一个动作来进行 API 调用，2. 动作使用 Reducers 更新 Redux 存储并从 API 响应（可能有数据或没有数据） , 3. 您将在“状态”中获取该数据作为“mapStateToProps”的参数。 4. 写unsignedNote: unsignedEncounters ? false : true,之类的逻辑。 （如果它是一个检查对象是否为空的数组，则可以根据 unsignedEncounters 的长度编写逻辑）。