Javascript 如何在react中获得ajax响应？

我做了很多关于如何获得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;

从“React”导入React；
从“axios”导入axios；
类测试扩展了React.Component{
构造函数（）{
超级（）；
此.state={
人:{
姓名：“迈克”，
姓：“布朗”，
答复：[]
}
};
}
componentDidMount（）{
var self=这个；
axios.get（）https://jsonplaceholder.typicode.com/posts')
.然后（功能（响应）{
console.log（response.data）
console.log（response.data[0].title）
self.setState（{response:response.data}）；
});
}
render（）{
返回(
{this.state.person.name}

{
this.state.person.response.map（（eachItem）=>{
返回(

{eachItem.title}

)
})
}

);
}
}
导出默认测试；

它应该是这样的

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;

从“React”导入React；
从“axios”导入axios；
类测试扩展了React.Component{
构造函数（）{
超级（）；
此.state={
人:{
姓名：“迈克”，
姓：“布朗”，
答复：[]
}
};
}
componentDidMount（）{
axios.get（）https://jsonplaceholder.typicode.com/posts')
。然后（（响应）=>{
这个.setState（{
person:Object.assign（{}，this.state.person，{response:response.data}）
});
});
}
render（）{
const person=this.state.person；
调试器；//在控制台打开的情况下运行代码，看看是什么
//this.state.person看起来像。请确保渲染是
//至少调用两次（此调试器应停止）
//每次被击中都要执行。
返回(
{person.name+“”+person.lastname}

{
person.response.map（（eachItem，idx）=>{
返回(

{eachItem.title}

)
})
}

);
}
}
导出默认测试；

它应该是这样的

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;

从“React”导入React；
从“axios”导入axios；
类测试扩展了React.Component{
构造函数（）{
超级（）；
此.state={
人:{
姓名：“迈克”，
姓：“布朗”，
答复：[]
}
};
}
componentDidMount（）{
axios.get（）https://jsonplaceholder.typicode.com/posts')
。然后（（响应）=>{
这个.setState（{
person:Object.assign（{}，this.state.person，{response:response.data}）
});
});
}
render（）{
const person=this.state.person；
调试器；//在控制台打开的情况下运行代码，看看是什么
//this.state.person看起来像。请确保渲染是
//至少调用两次（此调试器应停止）
//每次被击中都要执行。
返回(
{person.name+“”+person.lastname}

{
person.response.map（（eachItem，idx）=>{
返回(

{eachItem.title}

)
})
}

);
}
}
导出默认测试；

State是需要在构造函数中设置的显式内容。this.person=....应该是

this.State={person:..}

。渲染函数应该从.then（）中的this.State.提取person响应处理程序，您需要使用箭头函数，或者显式绑定函数。

此

不是指react组件，否则。（=>{}将自动绑定到它在中定义的上下文。否则函数（响应）{….}.bind（此）很抱歉，这不是一个调试的地方。请尝试按照您可以在web上找到的教程进行操作。您的setState也在设置顶级键“response”，但您的组件状态没有这样的键。您需要设置一个全新的person对象，并嵌套正确的响应。现在，get调用后的状态将是

{person:{name:'mike'，lastname:'brown'，response:[]}，response:ActualResponseHere}

状态是您需要在构造函数中设置的显式内容。this.person=..…应该是

this.State={person:..}

。并且您的呈现函数应该从.then（）中的this.State.提取person响应处理程序，您需要使用箭头函数，或者显式绑定函数。

此

不是指react组件，否则。（=>{}将自动绑定到它在中定义的上下文。否则函数（响应）{….}.bind（此）很抱歉，这不是一个调试的地方。请尝试按照您可以在web上找到的教程进行操作。您的setState也在设置顶级键“response”，但您的组件状态没有这样的键。您需要设置一个全新的person对象，并嵌套正确的响应。现在，get调用后的状态将是

{person:{name:'mike'，lastname:'brown'，response:[]}，response:ActualResponseHere}

为什么componentDidMount中有…currentPerson？只是为了防止行太长。还试图显示该状态应该是不可变的，所以您希望（通过…spread运算符）分散，或者可以使用Ob