Question

有人可以帮我解决这个问题。我可以看到来自api的响应，但是当页面呈现时，响应为时已晚，无法呈现。我找不到我做错了什么。如果有人能解释，我真的很感激。感谢

以下是我的减速机

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

Answer 1

为什么要在数据到来之前保留渲染。这是错误的练习并使你的webapp变慢。
和反应的美丽是随着数据的来临，它会更新视图的一部分，你可以看到数据。
您可以将数据作为prop发送到其他组件，并将检查放在要加载异步数据的位置以避免错误，如下所示 -

＆＃13;

//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>
    )
}

＆＃13;

遵循这种方法，通过这种方式，用户可以看到一小部分内容几秒钟，而不是等待全天来临
上面只是一种方式，如果你能更多地解释你的代码，我可以帮助

Answer 2

由于您未在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方法以接受参数并将其传递给要分派的操作。

希望这有帮助。

React Redux - 在渲染之前加载响应数据

2 个答案: