-
Notifications
You must be signed in to change notification settings - Fork 1.1k
docs(cn): translate docs/faq-ajax.md into Chinese #157
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 6 commits
e390005
23a684d
4bebfd0
84a71ad
2a5413c
03f27da
7754856
afe09f8
f5bbb0b
4bf7178
766a016
196f15c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -6,19 +6,19 @@ layout: docs | |||||
category: FAQ | ||||||
--- | ||||||
|
||||||
### How can I make an AJAX call? {#how-can-i-make-an-ajax-call} | ||||||
### 我怎样在 React 中发起 AJAX 请求{#how-can-i-make-an-ajax-call} | ||||||
|
||||||
You can use any AJAX library you like with React. Some popular ones are [Axios](https://github.com/axios/axios), [jQuery AJAX](https://api.jquery.com/jQuery.ajax/), and the browser built-in [window.fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). | ||||||
在React开发中,你能使用任何你喜欢的 AJAX 库,比如社区比较流行的[Axios](https://github.com/axios/axios),[jQuery AJAX](https://api.jquery.com/jQuery.ajax/),或者是浏览器内置的[window.fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)。 | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 已经更正,如果还有任何lint问题,请一下全部提出哈,这样我也方便一次全部进行修复 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 好的,不好意思啊,我之前没有看出来。。🤣 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 哈哈哈 没事没事,没有blame你哈。 非常感谢你这么仔细的review |
||||||
|
||||||
### Where in the component lifecycle should I make an AJAX call? {#where-in-the-component-lifecycle-should-i-make-an-ajax-call} | ||||||
### 我应该在 React组件 的哪个生命周期函数中发起 AJAX 请求?{#where-in-the-component-lifecycle-should-i-make-an-ajax-call} | ||||||
hateonion marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
|
||||||
You should populate data with AJAX calls in the [`componentDidMount`](/docs/react-component.html#mounting) lifecycle method. This is so you can use `setState` to update your component when the data is retrieved. | ||||||
我们推荐你在[`componentDidMount`](/docs/react-component.html#mounting)这个生命周期函数中发起 AJAX 请求。这样做你可以拿到 AJAX 请求返回的数据并通过 `setState` 来更新组件。 | ||||||
|
||||||
### Example: Using AJAX results to set local state {#example-using-ajax-results-to-set-local-state} | ||||||
### 用例:使用 AJAX 请求结果去改变 local state {#example-using-ajax-results-to-set-local-state} | ||||||
hateonion marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
|
||||||
The component below demonstrates how to make an AJAX call in `componentDidMount` to populate local component state. | ||||||
下面这个组件演示了如何在 `componentDidMount` 中发起 AJAX 请求去更新组件的 state 。 | ||||||
|
||||||
The example API returns a JSON object like this: | ||||||
示例 API 返回如下的 JSON 格式。 | ||||||
hateonion marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
|
||||||
``` | ||||||
{ | ||||||
|
@@ -50,9 +50,8 @@ class MyComponent extends React.Component { | |||||
items: result.items | ||||||
}); | ||||||
}, | ||||||
// Note: it's important to handle errors here | ||||||
// instead of a catch() block so that we don't swallow | ||||||
// exceptions from actual bugs in components. | ||||||
// 注意:在这里需要通过如下方式来处理错误而不是使用 catch() 去捕捉错误 | ||||||
hateonion marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
// 因为使用catch去捕捉错误会掩盖掉组件本身可能产生的 bug | ||||||
hateonion marked this conversation as resolved.
Show resolved
Hide resolved
hateonion marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
(error) => { | ||||||
this.setState({ | ||||||
isLoaded: true, | ||||||
|
Uh oh!
There was an error while loading. Please reload this page.