React Redux - 渲染前加載響應數據

有人可以幫助我解決這個問題。我可以看到api的響應，但當頁面呈現時，響應太遲而無法呈現。我找不到我做錯了什麼。如果有人能解釋我會很感激。由於React Redux - 渲染前加載響應數據

下面是我的減速器

export default function reducer(state = { 
    responseCode : { 
    }, 
    fetching: false, 
    fetched: false, 
    error: null 
}, action){ 
    switch(action.type){ 
    case 'FETCH_RESPONSECODE_PENDING' : { 
     return { ...state, fetching: false} 
     break; 
    } 
    case 'FETCH_RESPONSECODE_ERROR' : { 
     return { ...state, fetching: false, error: action.payload } 
    } 
    case 'FETCH_RESPONSECODE_FULFILLED' : { 
     return{ 
     ...state, 
     fetching: false, 
     fetched: true, 
     responseCode: action.payload 
     } 
     break; 
    } 
    } 
    return state; 
}

// SearchResponseCode組件

handleSearch(event){ 
    event.preventDefault(); 
    } 

render(){ 
    return (
     <form> 
     <div className="col-xs-8"> 
      <input type="number" className="form-control" placeholder="e.g. main mailing response code or recruitment campaign code" ref="responseCode" /> 
     </div> 
     <div className="col-xs-4"> 
      <button className="btn btn-default" onClick={this.handleSearch.bind(this)}>Search</button> 
     </div> 
     </form> 

    )  
    }

//主要成分

import SearchResponseCode from './search-response-code' 
import { connect } from 'react-redux' 
import { fetchResponseCode } from '../../actions/responseCodeActions' 

@connect((store)=>{ 
    return{ 
    responseCode: store.responseCode.responseCode 
    }; 
}) 
    fetchResponseCode(){ 
    this.props.dispatch(fetchResponseCode(brandUrl, 2570010)) 
    } 


    render(){ 
    const { responseCode } = this.props 
    console.log(this.responseCode) 
    return(
     <Tabs selectedIndex={0}> 
     <TabList> 
      <Tab>Search By Responce Code</Tab> 
      <Tab>Search By Item Code</Tab> 
      <Tab>Searh All</Tab> 
     </TabList> 
     <TabPanel> 
      <SearchResponseCode fetchResponseCode={this.fetchResponseCode.bind(this)} /> 
     </TabPanel> 
     <TabPanel> 
      <SearchItemCode /> 
     </TabPanel> 
     <TabPanel> 
     </TabPanel> 
     </Tabs> 
    ) 
    } 
}

//行動

import axios from 'axios' 

export function fetchResponseCode(brandUrl, responseCode){ 
    let url = brandUrl + '/api/offer/' + responseCode; 

    return function(dispatch){ 
    axios.get(url) 
     .then((response) => { 
     dispatch({ 
      type : 'FETCH_RESPONSECODE_FULFILLED', 
      payload : response.data 
     }) 
     }) 
     .catch((err) => { 
     dispatch({ 
      type : 'FETCH_RESPONSECODE_ERROR', 
      payload : err 
     }) 
     }) 
    } 
}

來源

2017-02-23 Mesmerize86

你的SearchResponseCode組件並不都在那裏，這可能會幫助你。 Axios使用承諾發送給商店，當響應回來時應該觸發渲染。換句話說，對於渲染來說，響應不會太遲，您可能不會使用狀態的正確部分。 –

嗨@JoPeyper謝謝你的回覆。你能找出我做錯了什麼嗎？ – Mesmerize86

@ Mesmerize86單擊SearchResponseCode組件中的Search btn時發生了什麼？頁面重新呈現之前等待一會兒？ – semuzaboi

因爲您沒有調用SearchResponseCode.handleSearch內的任何內容，所以不會發生任何事情。

您需要在該函數內調用fetchResponseCode。

// SearchResponseCode組件

handleSearch(e) { 
    e.preventDefault(); 
    const input = this.refs.responseCode.value; //you should avoid using ref="string" 
    this.props.fetchResponseCode(input); 
}

當然，你需要修改你的主要成分中的fetchResponseCode方法接受參數，並把它傳遞給行動派遣。

希望這會有所幫助。

來源

2017-02-28 15:38:56 jpdelatorre

沒錯。我有一個this.props.fetchResponseCode（輸入）;在我的handleSearch中。但是，當涉及到fetchResponseCode（輸入）函數時，我已經調度了我的動作。 'fetchResponseCode（input）{this.props.dispatch（fetchResponseCode（brandURL，input）） }'當我登錄控制檯時，我得到我的迴應。然而，在呈現當我console.log（this.props.response.numOfAddOnItems），我得到一個錯誤無法讀取未定義的屬性'numOfAddOnItems'。 – Mesmerize86

我在代碼中看不到任何'numOfAddOnItems'的引用。不知道如何幫助你。 – jpdelatorre

numOfAddOnItems只是我響應中的一個對象的項目。我試圖上傳圖像，並實現了stackoverflow不支持它。不過，我已經很快列出來使其更清楚。 '.response \t .numOfAddOnItems：1 \t .addOnItems：Array [0] \t .dataRange：Object'我希望我說清楚。 – Mesmerize86

爲什麼你想保留呈現，直到數據到來。這是錯誤的做法，並使您的webapp更慢。
反應的美妙之處在於數據來了，它更新了視圖的一部分，您可以看到數據。
可以發送數據作爲道具其他組件和地方要加載的異步數據，以避免錯誤的支票，像這樣 -

//suppose you will get an address object from api ,which will contain city ,area ,street ,pin code etc 
 
// address={} intially address is a blank object 
 
render(){ 
 
    return(
 
     (typeof address.area!='undefined')? 
 
     <div> 
 
     <div>{address.city}</div> 
 
     <div>{address.street}</div> 
 
     <div>{address.pin_code}</div> 
 
     <div>{address.area}</div> 
 
     </div> 
 
     :<div>loading....</div> 
 
    ) 
 
}

後續這種方式，用戶可以通過這種方式看到秒的部分內容，而不是等待完整數據來臨
上面只是一個方式，如果你可以更多地解釋你的代碼，我可能會幫助

來源

2017-03-27 12:29:54

React Redux - 渲染前加載響應數據

回答

相關問題