Question

我有一个带有按钮的React应用程序，该按钮可获取每个国会议员的最新账单和主要捐助者。这两个操作（fetchBillsByRep和getRepFinances）均获取正确的数据并正确更新Redux状态。但。虽然获取票据会导致立即重新呈现，但获取捐赠者却不会。

我已经阅读了十几个类似问题的答案，并尝试了解决方法。我不是在改变状态；我总是做一个新的副本。我在调试程序中按预期的方式运行-并且按预期方式获得了所有值。

在MemberCard组件内部，handleDonorsClick

  //donors
  handleDonorsClick = () => {
    let id = this.props.crp_id
    if (this.props.chamber === "senate"){
      this.props.getSenatorFinances(id)
    } else if (this.props.chamber === "house"){
      this.props.getRepFinances(id)
    }
    this.setState({ showDonors: true })
    debugger
    //showDonors = true
  }

HouseActions动作创建者：所有预期值：

export function fetchBillsByRep(id){
  return (dispatch) => {
      return fetch(API_BASE_URL+'/search/bills/member/'+id)
      .then(resp => resp.json())
      .then(bills => {
        if (!bills.error) {
          dispatch({type:"FETCH_BILLS_BY_REP", payload: { bills: bills, id:id}})
        } else {
          alert(bills.error.fullMessage)
        }
      }
    ).catch(error => alert(error))
  }
}

export function getRepFinances(id){
  return (dispatch) => {
      return fetch(API_BASE_URL+'/search/financial_disclosures/member/'+id)
      .then((resp) => resp.json())
      .then(financialDisclosure => {
        if (!financialDisclosure.error) {
          dispatch({
            type:"GET_REP_FINANCES",
            payload: { financialDisclosure: financialDisclosure, id:id }})
        } else {
          alert(financialDisclosure.error.fullMessage)
        }
      }
    ).catch(error => alert(error))
  }
}

house.js减速器：再次，所有值都符合预期

export default (state = [], action) => {
    switch(action.type){

    case "SET_HOUSE":
        return action.house

  //<truncated>

    case "FETCH_BILLS_BY_REP":
      let bills = action.payload.bills
      let house = state.map(rep => {
        //find rep update bills
        if (rep.propublica_id === action.payload.id){
          rep.bills = bills
        }
        return rep
      }
    )
      return house

    case "GET_REP_FINANCES":
      let financialDisclosure = action.payload.financialDisclosure
      let house1 = state.map(rep => {
        if (rep.crp_id === action.payload.id){
          rep.financialDisclosure = financialDisclosure
          rep.donors = financialDisclosure.donors
        }
        console.log(rep.donors)
        return rep 
        //rep now has donors under rep.donors
      }
    )
      return house1
      //house1 is being returned as the new state for house
      //inside house1, rep has updated rep.donors
     default:
        return state;
    }
  }

单击“获取捐助者”按钮后，Redux DevTools状态：“差异”选项卡：（被截短，仅显示前2名）

house
51
donors
0{
  "id": 621,
  "org_name": "Buchanan, Ingersoll & Rooney",
  "total": 21600,
  "pacs": 0,
  "indivs": 21600
}
1{
  "id": 622,
  "org_name": "Telacu",
  "total": 18900,
  "pacs": 0,
  "indivs": 18900
}

MemberCard组件逻辑，用于决定是呈现票据还是捐赠者：

       //format back of card
    let align
    let content
    let space
    if (this.state.showBills){
      image = ""
      align = "center"
      space = <br/>
      content =
      <>
       <MemberBills
        member={this.props}
        showBills={this.state.showBills}/>
        {hideBillsButton}
      </>
    } else if (this.state.showDonors){
      //debugger hits, this.state.showDonors = true
      image = ""
      align = "center"
      space = <br/>
      content =
      <>
        <MemberDonors
          member={this.props} showDonors={this.state.showDonors}/>
          {/*member has value, showDonors is true*/}
        {hideDonorsButton}
          {/*hideDonorsButton has value*/}
      </>

MemberDonors呈现：

<div>
        <br/>
        <hr/>
        <h4 className="center">Top Three Donors</h4>
        {popUpNotice}
        {donorList}
        {/* donorList has correct values */}
        <br/>
        {donorsSource}
        {/* donorsSource has correct values */}
        <br/>
        <br/>
      </div>

我没有任何错误。取而代之的是，我获得了MembersDonors视图，其中显示了“前三名捐赠者”，弹出式通知...，但没有施主列表。但是，如果刷新页面，请再次找到该特定成员，然后重新单击showDonors按钮，将显示捐助者。

我正在遵循用于获取和显示钞票的相同模式。

有什么想法我想念的吗？

Answer 1

您没有完整显示化径器，但我敢打赌，这是因为您正在改变状态，而不是创建新版本。

a = {}
b = a
b.d = 10
console.log(a)
console.log(b)
console.log(a === b)

您需要返回状态的新副本，可以使用Object.assign或散布运算符

来完成。

a = {}
b = {...a}
b.d = 10
console.log(a)
console.log(b)
console.log(a === b)

简而言之，修复代码的最简单方法是在return语句中为所有情况创建一个副本。

return {...rep}

Redux devTools显示了状态差异，但是React组件不会更新

1 个答案: