摘要:截至今天我們已經通過承諾使用包建立我們的應用程序安裝我們的遠程對象獲取庫我們終于準備好將遠程數(shù)據(jù)集成到我們的應用程序中。真的很有趣在任何情況下今天我們做了相當多的工作獲取遠程數(shù)據(jù)到我們的應用程序。
本文轉載自:眾成翻譯
譯者:iOSDevLog
鏈接:http://www.zcfy.cc/article/3813
原文:https://www.fullstackreact.com/30-days-of-react/day-16/
我們的前端應用與我們在其中顯示的數(shù)據(jù)一樣有趣。今天,我們開始提出數(shù)據(jù)請求,并將其集成到我們的應用中。
截至今天, 我們已經通過承諾, 使用 npm包建立我們的應用程序, 安裝我們的遠程對象獲取庫 (whatwg-fetch), 我們終于準備好將遠程數(shù)據(jù)集成到我們的應用程序中。
獲取數(shù)據(jù)我們安裝在 第14 天。fetch 庫后讓我們進入使用它。
為了簡單起見, 讓我們從昨天從 api 服務器獲取當前時間的示例中進行演示:
此演示反應組件對 api 服務器發(fā)出請求, 并從它的時鐘中報告當前時間。在我們添加調用來獲取之前, 讓我們創(chuàng)建一些有狀態(tài)的組件, 我們將用來顯示時間并更新時間請求。
代碼警告墻我們意識到, 接下來的幾行是 _代碼警告墻_, 我們通常試圖避免, 特別是沒有討論如何工作。然而, 由于我們不是在討論如何在這里詳細地創(chuàng)建一個組件, 但是我們還是要填寫一個完整的組件, 我們已經破例了。
如果你希望我們改變今天的做法,請留下我們的反饋 (底部的鏈接),。
首先, 將顯示和獲取當前時間的包裝組件的基礎如下所示。讓我們復制并粘貼到我們的應用程序在src/App.js的代碼:
import React from "react"; import "whatwg-fetch"; import "./App.css"; import TimeForm from "./TimeForm"; class App extends React.Component { constructor(props) { super(props); this.state = { currentTime: null, msg: "now" } } // methods we"ll fill in shortly fetchCurrentTime() {} getApiUrl() {} handleFormSubmit(evt) {} handleChange(newState) {} render() { const {currentTime, tz} = this.state; const apiUrl = this.getApiUrl(); return ({!currentTime && } {currentTime &&) } } export default App;The current time is: {currentTime}}We"ll be making a request from:
{apiUrl}
前面的組件是我們創(chuàng)建的基本狀態(tài)響應組件。因為我們要顯示一個表單, 我們已經包括了 TimeForm 的預期用法, 讓我們創(chuàng)建下一個。
讓我們在我們的反應應用程序中使用 create-react-app. 來創(chuàng)建這個組件。將文件src/TimeForm.js 添加到我們的項目中:
touch src/TimeForm.js
現(xiàn)在, 讓我們添加內容。我們希望我們的 TimeForm t能夠發(fā)揮作用, 允許用戶在瀏覽器中切換時區(qū)。我們可以通過創(chuàng)建一個 stateful 組件來處理這個, 我們稱之為 TimeForm。我們的TimeForm組件的外觀可能如下所示:
import React from "react" const timezones = ["PST", "MST", "MDT", "EST", "UTC"] export class TimeForm extends React.Component { constructor(props) { super(props); const {tz, msg} = this.props; this.state = {tz, msg}; } _handleChange(evt) { typeof this.props.onFormChange === "function" && this.props.onFormChange(this.state); } _changeTimezone(evt) { const tz = evt.target.value; this.setState({tz}, this._handleChange); } _changeMsg(evt) { const msg = encodeURIComponent(evt.target.value).replace(/%20/, "+"); this.setState({msg}, this._handleChange); } _handleFormSubmit(evt) { evt.preventDefault(); typeof this.props.onFormSubmit === "function" && this.props.onFormSubmit(this.state); } render() { const {tz} = this.state; return () } } export default TimeForm;
隨著這些組件的創(chuàng)建, 讓我們在瀏覽器中加載我們的應用程序后, npm start 后運行 , 我們將看到我們的形式 (雖然還沒有令人難以置信的美麗)。當然, 在這一點上, 我們不會有一個正在運行的組件, 因為我們沒有實現(xiàn)我們的數(shù)據(jù)獲取。讓我們現(xiàn)在就開始吧。
獲取數(shù)據(jù)正如我們昨天所說的, 我們將使用fetch() api 和承諾支持。當我們調用fetch() 的方法, 它會返回我們的承諾, 在那里我們可以處理的要求, 但我們想要的。我們將向我們的 基于當前 api 服務器發(fā)出請求 (所以如果在一段時間內沒有運行, 啟動可能會很慢)。
我們將建立我們將請求的 url, 因為它代表了我們將在服務器上請求的時間查詢。
我已經在App 組件中定義了方法 getApiUrl() , 因此, 讓我們在中填充該函數(shù)。
慢性 api 服務器接受幾個變量, 我們將在表單中進行自定義。它將采取的時區(qū)與一個慢性的消息。我們將簡單地開始, 并問慢性庫的 pst 時區(qū)和當前時間 (now):
class App extends React.Component { constructor(props) { super(props); this.state = { currentTime: null, msg: "now", tz: "PST" } } // ... getApiUrl() { const {tz, msg} = this.state; const host = "https://andthetimeis.com"; return host + "/" + tz + "/" + msg + ".json"; } // ... export default App;
現(xiàn)在, 當我們調用 getApiUrl() 時, 下一個請求的 url 將返回給我們?,F(xiàn)在, 最后, 讓我們實現(xiàn)我們的fetch() 功能。fetch() 函數(shù)接受一些可以幫助我們自定義請求的參數(shù)。最基本的fetch() 請求只需要一個 url 端點即可。fetch() 的返回值是一個承諾對象, 我們昨天深入了解過它。
讓我們更新我們的fetchCurrentTime() 方法, 從遠程服務器獲取當前時間。我們將在響應對象上使用 .json() 方法將響應的主體從 json 對象轉換為 javascript 對象, 然后通過將dateString 的響應值設置為組件狀態(tài)中的currentTime 來更新我們的組件:
class App extends React.Component { // ... fetchCurrentTime() { fetch(this.getApiUrl()) .then(resp => resp.json()) .then(resp => { const currentTime = resp.dateString; this.setState({currentTime}) }) } // ... }
今天我們項目的最后一部分是從窗體中獲取數(shù)據(jù), 以更新父組件。即, 當用戶更新TimeForm 組件中的值時, 我們希望能夠訪問App組件中的數(shù)據(jù)。TimeForm組件已經為我們處理了這個過程, 所以我們只需要實現(xiàn)我們的表單功能。
當一個狀態(tài)在窗體組件上發(fā)生變化時, 它將調用一個稱為onFormChange的屬性。通過在App 組件中定義此方法, 我們可以訪問該表單的最新版本。
事實上, 我們將只調用setState() 來跟蹤表單允許用戶操作的選項:
class App extends React.Component { // ... handleChange(newState) { this.setState(newState); } // ... }
最后, 當用戶提交表單時 (按下按鈕 或者 按 回車 鍵在輸入字段中單擊), 我們將希望對時間提出另一個請求。這意味著我們可以定義我們的handleFormSubmit 的屬性, 只是調用 fetchCurrentTime()方法:
class App extends React.Component { // ... handleFormSubmit(evt) { this.fetchCurrentTime(); } // ... }
嘗試運行演示和傳遞不同的慢速選擇。真的很有趣
在任何情況下, 今天我們做了相當多的工作, 獲取遠程數(shù)據(jù)到我們的應用程序。然而, 在這一點上, 我們只有一頁的單頁應用程序。如果我們想在我們的應用程序中顯示不同的頁面呢?明天, 我們將開始在我們的應用程序中添加多個頁面, 以便我們可以查看不同的視圖。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/84726.html
摘要:今天我們將討論創(chuàng)建組件的最終方案,即無狀態(tài)函數(shù)的純組件。今天我們正在研究一種處理提出的復雜數(shù)據(jù)的方法,稱為體系結構。第天部署介紹今天,我們將探討部署我們的應用所涉及的不同部分,以便外界可以使用我們的應用。 本文轉載自:眾成翻譯譯者:iOSDevLog鏈接:http://www.zcfy.cc/article/3758原文:https://www.fullstackreact.com/3...
摘要:本文轉載自眾成翻譯譯者鏈接原文我們已準備好外部請求獲取數(shù)據(jù)今天我們來看一下調用外部的第一步。查詢遠程數(shù)據(jù)正常的瀏覽器工作流實際上是同步的。如果我們想從異地獲取一些數(shù)據(jù)怎么辦我們將在啟動時對數(shù)據(jù)進行請求以在應用中填充數(shù)據(jù)。 本文轉載自:眾成翻譯譯者:iOSDevLog鏈接:http://www.zcfy.cc/article/3816原文:https://www.fullstackrea...
摘要:在我們的應用中添加太多的復雜度來加載外部數(shù)據(jù)之前今天我們將快速了解如何在應用中重復組件元素。出于性能原因使用虛擬嘗試限制在重新視圖時需要更新的元素的數(shù)量。 本文轉載自:眾成翻譯譯者:iOSDevLog鏈接:http://www.zcfy.cc/article/3826原文:https://www.fullstackreact.com/30-days-of-react/day-13/ 今...
摘要:但是使用標記將告訴瀏覽器處理路由就像服務器端路由一樣。組件需要一個稱為的屬性指向要渲染的客戶端路由。發(fā)生這種情況的原因是響應路由器將渲染與路徑匹配的所有內容除非另有指定。屬性預計將是一個函數(shù)將在對象連同和路由配置時調用。 本文轉載自:眾成翻譯譯者:iOSDevLog鏈接:http://www.zcfy.cc/article/3815原文:https://www.fullstackrea...
摘要:去營救有一種方法我們把我們的歸約器分成多個歸約器每個都只負責狀態(tài)樹的葉子。此外我們還學習了如何擴展以使用多個歸約器和動作以及多個連接的組件。 本文轉載自:眾成翻譯譯者:iOSDevLog鏈接:http://www.zcfy.cc/article/3825原文:https://www.fullstackreact.com/30-days-of-react/day-20/ 使用Redux,...
閱讀 3917·2021-09-09 09:33
閱讀 1773·2021-09-06 15:14
閱讀 1919·2019-08-30 15:44
閱讀 3075·2019-08-29 18:36
閱讀 3765·2019-08-29 16:22
閱讀 2095·2019-08-29 16:21
閱讀 2530·2019-08-29 15:42
閱讀 1648·2019-08-29 11:00