如何使用 axios 在 reactJS 中获取数据？答案

【问题标题】：how to get data in the reactJS using axios?如何使用 axios 在 reactJS 中获取数据？
【发布时间】：2018-01-22 21:56:37
【问题描述】：

当我以 JSON 格式获取数据并尝试将其转换为 html 时，我有 reactJS 类：

class ProjectList extends React.Component {
    constructor(props) {
        super(props);

        this.state = {projects: []};
    }

    componentDidMount() {
        axios
            .get('http://localhost:8080/project')
            .then(res => this.setState({ projects: res.data.name }))
            .catch(err => console.log(err))
    }

    render() {
        return (
            this.state.projects.map((project) => {
                return (
                    <div>
                        <p> {project.name} </p>
                    </div>
                )
            })
        )
    }
}

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

我可以理解是什么问题，因为 reactJS 有一些问题

【问题讨论】：

您遇到的错误是什么？确保this.state.projects.map 在{ } 里面，比如{ this.state.projects.map ( project => { return ... } ) } 注意额外的{ }

标签： javascript reactjs rest axios

【解决方案1】：

看起来您正在存储 res.data.name 而不是 res.data。意思是 this.state.projects 被设置为单个 name 字符串。您应该将 this.state.projects 设置为 res.data 以获得完整的项目数组：

componentDidMount() {
    axios
        .get('http://localhost:8080/project')
        .then(res => this.setState({ projects: res.data }))
        .catch(err => console.log(err))
}

【讨论】：