異步調用後渲染路線

我正在構建我的第一個React應用程序。我試圖渲染一些來自react-router-dom的路由。從我調用我的api獲取一個json對象的主要組件，然後我更新狀態。問題是我設置新狀態後，我的子組件不會重新渲染，因此我沒有子組件中的道具。我已經使用了一些功能，如forcerender和componentWillReceiveProps，但仍然不起作用異步調用後渲染路線

我敢肯定這不是一個大問題，但我一直試圖解決這個問題幾個小時，我一直無法做到這行得通。

這裏是我的最新嘗試：

class DetectorEfficiencyCalculator extends Component { 
 
    constructor(props) { 
 
    super(props); 
 
     this.state = { 
 
     detectors: [] 
 
    }; 
 
     axios.get(`/detectors`) 
 
     .then(res => { 
 
     const detectors = res.data; 
 
     this.setState({ detectors }); 
 
      console.log('state updated') 
 
     }); 
 
    } 
 

 

 

 
    render() { 
 
    return (
 
     <div className="DetectorEfficiencyCalculator"> 
 
      <RoutesHandler detectors={this.state.detectors}/> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class RoutesHandler extends Component{ 
 
    constructor(props) { 
 
     super(props); 
 
     this.state  = { detectors: props.detectors } ; 
 
    } 
 
    componentWillReceiveProps(nextProps) { 
 
     this.setState({detectors:nextProps.detectors}) 
 
     this.forceUpdate() 
 
    } 
 
     render() { 
 
     console.log('render') 
 
    return (
 
     <div className="RoutesHandler"> 
 
      <Switch> 
 
       <Route exact path='/frontend/Detectors' component={DetectorList} detectors={this.props.detectors}/> 
 
       <Route path='/frontend/Detectors/:number' component={DetectorDetail} detectors={this.props.detectors}/> 
 
      </Switch> 
 

 
     </div> 
 
    ); 
 
    } 
 

 
} 
 

 

 

 
class DetectorList extends Component { 
 

 
    render() { 
 
     console.log('renderList') 
 
     if (!this.props.detectors) { 
 
      return null; 
 
     } 
 
    return (
 
     <ul> 
 
      {this.props.detectors.map(u => { 
 
       return (
 
        <Detector 
 
         id={u.id} 
 
         name={u.name} 
 
         single={u.single} 
 
         threshold={u.threshold} 
 
         angle={u.angle} 
 
        /> 
 
      ); 
 
      })} 
 
     </ul> 
 
    ); 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

在此先感謝您的幫助:)

來源

2017-07-13 alvcarmona

[請不要把問題標題標籤（https://stackoverflow.com/help/tagging） – Liam

把'的console.log（ 'renderList'，這一點。 props.detectors）'在DetectorList組件中，並檢查您是否獲得更新的值。 –

好的，我進入瞭解決方案：路線呈現一個函數，在該函數中渲染組件並使用我需要的道具加載組件。

 this.RenderDetectorDetail = (props) => { 
 
      return (
 
       <DetectorDetail detectors={this.props.detectors}/> 
 
      ); 
 
    }; 
 
    
 
    <Route exact path='/frontend/Detectors' render={this.RenderDetectorList} />

來源

2017-07-18 11:59:54 alvcarmona

嘗試是這樣的：

class DetectorEfficiencyCalculator extends Component { 
 
    state={detectors:[]} 
 

 
    componentDidMount(){ 
 
    const self = this; 
 
    axios.get(`/detectors`) //do it here... 
 
     .then(res => { 
 
     const detectors = res.data; 
 
     self.setState({ detectors }); 
 
      console.log('state updated') 
 
     }); 
 
    } 
 

 

 
    render() { 
 
    return (
 
     <div className="DetectorEfficiencyCalculator"> 
 
      <RoutesHandler detectors={this.state.detectors}/> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class RoutesHandler extends Component{  
 
    render() { 
 
     console.log('render') 
 
    return (
 
     <div className="RoutesHandler"> 
 
      <Switch> 
 
       <Route exact path='/frontend/Detectors' component={DetectorList} detectors={this.props.detectors}/> 
 
       <Route path='/frontend/Detectors/:number' component={DetectorDetail} detectors={this.props.detectors}/> 
 
      </Switch> 
 

 
     </div> 
 
    ); 
 
    } 
 

 
} 
 

 

 

 
class DetectorList extends Component { 
 

 
    render() { 
 
     console.log('renderList') 
 
     if (!this.props.detectors) { 
 
      return null; 
 
     } 
 
    return (
 
     <ul> 
 
      {this.props.detectors.map(u => { 
 
       return (
 
        <Detector 
 
         id={u.id} 
 
         name={u.name} 
 
         single={u.single} 
 
         threshold={u.threshold} 
 
         angle={u.angle} 
 
        /> 
 
      ); 
 
      })} 
 
     </ul> 
 
    ); 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

基本上，你不想在構造函數中執行任何ajax調用或db訪問，這不是在React中執行它的正確方法，因爲可以多次調用構造函數。而是使用React組件生命週期方法componentDidMount來啓動api調用。另外我使用了一個變量（self）來保存組件的引用（this），以便我可以在axios promise處理程序中使用它。

來源

2017-07-13 18:46:13

我試過但仍然無法工作。當我渲染像這樣的子組件時，它會使用來自api的數據正確渲染這些propes，但是當我將其渲染爲它永遠不會更新它的道具。我認爲我沒有正確使用交換機或路由組件，任何想法爲什麼？ – alvcarmona

你有使用交換機的特殊原因嗎？我已經完成了許多複雜的React應用程序，並且從來沒有使用ReactRouter中的那個組件，並不是說你不需要它就試圖找出用例。 –

使用開關，因爲我從示例中複製它。經過一段時間的努力解決這個問題，我仍然沒有任何線索如何解決它:( – alvcarmona

異步調用後渲染路線

回答

相關問題