從按鈕單擊事件渲染React組件

我在開發一個由圖表組件和一些其他組件組成的小型反應應用程序。圖表組件是一個單獨的文件/組件/子組件。當我點擊主容器中的按鈕時，它會調用一個承諾（使用axio）並返回一些數據作爲響應。此響應數據設置爲狀態，並將狀態作爲prop傳遞給圖表組件。但圖表無法加載。這是因爲圖表已經被加載，因爲初始狀態是空的圖表也是空的。只有在承諾返回數據後纔有任何方法來呈現圖表組件？從按鈕單擊事件渲染React組件

這是我的代碼

按鈕點擊事件

ClickMe =() =>{ 

     axios.get('http://xyzsdsd.com/abc') 
      .then((response)=>{ 

       this.setState({ 
       tags:response.data 
       }); 

       console.log(this.state.tags); 

      }).catch((err)=>{ 

       console.log(err); 
      }); 


    }

渲染功能

render(){ 
     return(
     <div> 
     <otherComponents/> 
     <chart data={this.state.tags}/> 
     </div> 

     ); 
}

來源

2016-11-10 TRomesh

如果你繼續以這種方式使用React，你會遇到無數的麻煩，你應該看看[Flux]（https://facebook.github.io/flux/）和流行的實現/自適應[redux]（http://redux.js.org/）。很多人認爲React是一個功能齊全的框架，比如Angular - 不是。 React是一個小型庫，可處理前端應用程序的特定部分。 React使您可以自由選擇其他工具來完成其他任務，如獲取數據，維護大型應用程序狀態，路由等。 – naomik

加一個條件渲染，只有當你的狀態呈現的圖表組件。標籤對象是有效的。在初始渲染時，圖表不會被渲染。當你的AJAX調用返回並且setState（）被調用時，render（）會再次被一個非空的state.tags調用，從而渲染你的圖表。

render(){ 
    let chart; 

    if (this.state.tags) { 
    chart = <chart data={this.state.tags}/>; 
    } 

    return (
    <div> 
     <otherComponents/> 
     {chart} 
    </div> 
); 
}

來源

2016-11-10 18:05:35

或在構造函數 – fingerpich

對於良好的用戶體驗，您可能想要考慮組件或用戶界面可能遇到的不同狀態和流程。

所以從頭頂上我會有3個州。 Empty slate,loading（因爲您接觸到服務器也需要一些時間）和chart with data。

因此，根據您可能想要顯示不同組件的狀態。

我將在getInitialState函數中通過構造函數或不帶ES6的ES6中設置InitialState。

如果您想踢組件axios.get的ajax onLoad，您應該考慮放置componentDidMount。這也適用於React-Router。因此，無論何時導航到ChartComponent時，它都會在裝載時加載。

如果您碰巧認識到您的渲染函數中的if語句變得複雜，因爲您的業務邏輯需要更多。你一定要檢查出終極版（http://redux.js.org/)in結合發生反應，有狀態和數據流的更好的控制。

真的很棒內部如何構建反應與終極版的應用程序可以在此免費視頻系列中找到。 https://egghead.io/courses/getting-started-with-redux https://egghead.io/courses/building-react-applications-with-idiomatic-redux

希望有幫助

來源

2016-11-10 18:31:52 silverfighter

中設置圖表的初始數據，好像我沒有任何其他的替代方法比使用flux或redux。不管怎樣，謝謝。 – TRomesh

從按鈕單擊事件渲染React組件

回答

相關問題