Question

如何从URL获取数据到ReactJS。

网址类型如下： http://www.domain.com/api/json/x/a/search.php?s=category

，如果在浏览器中键入，将显示一个json对象。

如何将其加载到ReactJS。

首先，我开始：

const dUrl = "http://www.the....";

console.log(dUrl);

但显然它显示的是网址而不是内容（我将能够过滤 - 这只是将其加载到我不知道的对象的最初步骤）

编辑：我不想使用jQuery。

Answer 1

尝试使用Fetch API，这是Facebook推荐的。你应该避免在jQuery中使用ReactJS，并坚持使用ReactJS操作DOM的方式。

brew install convmv

或使用async / await

function getMoviesFromApiAsync() {
   return fetch('https://facebook.github.io/react-native/movies.json')
   .then((response) => response.json())
   .then((responseJson) => {
     return responseJson.movies;
   })
   .catch((error) => {
     console.error(error);
   });
}

https://facebook.github.io/react-native/docs/network.html

我知道这个URL是针对React Native的文档的，但这也适用于ReactJS。

Answer 2

编辑：使用fetch进行API调用。

fetch(http://www.example.com/api/json/x/a/search.php?s=category)
  .then(response => response.json())
  .then((jsonData) => {
    // jsonData is parsed json object received from url
    console.log(jsonData)
  })
  .catch((error) => {
    // handle your errors here
    console.error(error)
  })

Fetch可在所有现代浏览器中使用。

Answer 3

Hi Wasteland（有史以来最好的游戏，顺便说一下 - 但这是针对不同的帖子：）

最简单的方法：

使用axios库：//cdnjs.cloudflare.com/ajax/libs/axios/0.8.1/axios.min.js

componentDidMount: function() {
    var th = this;
    this.serverRequest = 
      axios.get(this.props.source)
         .then(function(result) {    
          th.setState({
            jobs: result.data.modules
          });
       })
 }

实施例 https://codepen.io/motekim/pen/RJPgRK

Answer 4

在React版本16或更高版本中，可以使用以下功能：

 yourFunctionName = async() => {
    const api_call = await fetch(`yourUrl`);
    const data = await api_call.json();
    console.log(data);
    }

Answer 5

http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp

你必须使用Ajax。检查上面的链接。尝试在其中一个组件生命周期方法中进行调用。这不使用JQuery。

ReactJS - 从URL获取json对象数据

5 个答案: