Skip to content

Translate faq-ajax #10

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.

Sign up for GitHub

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

Merged
merged 3 commits into from
Feb 2, 2019
Merged

Translate faq-ajax #10

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1a89a43
Translate faq-ajax
ossan-engineer Feb 1, 2019
20a0d14
Apply guidelines to document
ossan-engineer Feb 1, 2019
36ca68d
Merge branch 'master' into faq
smikitky Feb 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 10 additions & 11 deletions content/docs/faq-ajax.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
id: faq-ajax
title: AJAX and APIs
title: AJAX と API
permalink: docs/faq-ajax.html
layout: docs
category: FAQ
---

### How can I make an AJAX call?
### AJAX コールをする方法は？

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).
任意の AJAX ライブラリを React と共に利用可能です。人気のあるものとしては、[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) などがあります。

### Where in the component lifecycle should I make an AJAX call?
### コンポーネントのどのライフサイクルで AJAX コールすべきか？

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.
AJAX コールによるデータ取得は[`componentDidMount`](/docs/react-component.html#mounting)のライフサイクルメソッドで行うべきです。データ取得後に `setState` でコンポーネントを更新できるようにするためです。

### Example: Using AJAX results to set local state
### 例：ローカル state に AJAX の通信結果をセットする

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 オブジェクトはこのようになります：

```
{
Expand Down Expand Up @@ -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()ブロックの代わりにここでエラーハンドリングすることが重要です
(error) => {
this.setState({
isLoaded: true,
Expand Down