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 - 渲染前加载响应数据

回答

相关问题