如何让ajax调用做出反应？它在html中工作答案

【问题标题】：How to make ajax call in react? Its working in html如何让ajax调用做出反应？它在html中工作
【发布时间】：2017-10-28 02:00:12
【问题描述】：

class login extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: 23 };
  }
  componentDidMount() {
    var component = this;
    fetch('jsonplaceholder.typicode.com/posts')
      .then(function(response) {
        return response.json();
      })
      .then(function(json) {
        var data = json;
        console.log(data[0]);
        console.log(data[1].title);
        component.setState({ data: json });
      });
  }
  render() {
    var someData = this.state.data[1].title || '';
    return <div> <h1>elo{someData}</h1> </div>;
  }
}
export default login;

上面的代码只适用于数组格式而不是json响应任何人都可以帮助json响应api如何获取

【问题讨论】：

在 html 中添加脚本标签时，它是从响应 api 获取数据，但是谁能帮我如何在反应组件中加载该脚本标签

标签： jquery html ajax reactjs fetch-api

【解决方案1】：

使用 Fetch Api 代替 jquery 的旧 ajax。此外，您在进行 react 开发时不要使用 $(document).ready()，放置点击处理程序或任何其他 javascript 事件，然后进一步在那里进行 ajax 调用。

【讨论】：

类登录扩展 React.Component { constructor(props) { super(props); this.state = { 数据：23 }; } componentDidMount() { var component = this; fetch('jsonplaceholder.typicode.com/posts') .then(function(response) { return response.json() }).then(function(json) { var data = json; console.log(data[0]); console.log( data[1].title); component.setState({ data: json }) }) } render() { var someData = this.state.data[1].title || "";返回（

elo{someData}

）； } } 导出默认登录；
在 react 组件中加载时，只有数组格式响应 api 在 UI 中工作，但不是 json 格式
react 组件中带有 json 响应 api 的示例会有所帮助。
首先我看不懂你刚才在评论中写的代码，请以正确的格式评论，编辑你的问题并粘贴你的代码，选择整个代码然后按ctrl+k
谢谢你现在可以查看@aditya

【解决方案2】：

一些事情：

使用数组作为data 的初始状态，因为在获取后它将是一个数组。
检查render 中的this.state.data.length 以查看获取是否成功，否则不渲染（或加载指示器）。
fetch 需要一个协议，例如https。请务必将其添加到 URL 的前面。
小事：通常最佳实践将组件名称大写。不过，这取决于你。

试试这个：

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: [] };
  }
  componentDidMount() {
    var component = this;
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(function(response) {
        return response.json();
      })
      .then(function(json) {
        var data = json;
        console.log(data[0]);
        console.log(data[1].title);
        component.setState({ data: json });
      });
  }
  render() {
    var { data } = this.state;
    var someData = data.length ? data[1].title : '';
    return <div> <h1>elo{someData}</h1> </div>;
  }
}

ReactDOM.render(<Login />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

【讨论】：