Question

我做了很多关于如何获取AJAX响应并在页面上显示但仍然没有运气的研究。我正在使用axios，当我console.log(response.data)时，我可以看到响应，但我正在努力如何在页面上呈现它。

这是我的代码。

import React from 'react';
import axios from 'axios';

class Test extends React.Component {

constructor() {
    super();
    this.state = {
        person: {
            name: "Mike",
            lastname: "Brown",
            response: []
        }
    };
}

componentDidMount() {
    var self = this;
    axios.get('https://jsonplaceholder.typicode.com/posts')
        .then(function(response) {
        console.log(response.data)
            console.log(response.data[0].title)
        self.setState({ response: response.data});
    });
}

render() {
    return (
        <div>
            <h1>{this.state.person.name}</h1>
            <ul>
                {
                    this.state.person.response.map((eachItem) => {
                        return (
                            <li>
                                {eachItem.title}
                            </li>
                        )
                    })
                }
            </ul>

        </div>


    );
 }

}
export default Test;

Answer 1

看起来应该是这样的。

import React from 'react';
import axios from 'axios';


class Test extends React.Component {

constructor() {
    super();
    this.state = {
      person: {
        name: "Mike",
        lastname: "Brown",
        response: []
      }
    };
}

componentDidMount() {
    axios.get('https://jsonplaceholder.typicode.com/posts')
        .then((response) => {
        this.setState({ 
          person: Object.assign({}, this.state.person, { response: response.data })
        });
    });
}

render() {
    const person = this.state.person;
    debugger; // Run the code with your console open and see what
              // this.state.person looks like.  Make sure render is
              // called at least twice (this debugger should stop 
              // execution each time it's hit.
    return (
        <div>
            <h1>{person.name + " " + person.lastname}</h1>

            <ul>
                {
                    person.response.map((eachItem, idx) => {
                        return (
                            <li key={`item-${idx}`}>
                                {eachItem.title}
                            </li>
                        )
                    })
                }
            </ul>
        </div>
    );
}

}
export default Test;

如何获得ajax响应？

1 个答案: