在反应功能组件中使用axios方法从后端获取数据

Question

我在功能组件中使用 axios 方法..我已经在我的项目中尝试过...它无法正常工作....它显示抛出错误...如课程未定义...请帮助这个问题....我想使用我使用过的 url 从后端获取数据...

import React, { useState, useEffect } from 'react';

const Example =() => {
 const [users, setUsers] = useState([])
 useEffect(()=> {
    Axios.get("https://www.example.com/users/id/")
            .then(response => {
               this.setState({ courses: response.data })
                // console.log(response.data)
            })
            .catch(error => {
                console.log(error)
            })
 }, [])   

 return (
            <div>
             <Col xl={12} lg={12} md={12} sm={12} xs={12}>
                    <div className="main-boxes">
                        <div className="index-box-head">
                            3. Courses
                                </div>
                        <div className="course-index-boxes">
                            <div className="scrolling-data">
                                <List>
                                    {courses.map((course, key) => (
                                        <ListItem className="button-class" button key={key}>
                                            <NavLink className="link-levels" exact activeClassName="activeclass" to={course.diploma_url}>
                                                {course.diploma_course}
                                            </NavLink>
                                        </ListItem>
                                    ))}

                                </List>
                            </div>
                        </div>
                    </div>
                </Col>
            </div>
         )
}
export default Example

Answer 1

你没有this 这里不是 Class 所以你应该像这样得到它：

const Example =() => {
  const [courses, setCourses] = useState([]);
  useEffect(()=> {
    Axios.get("https://www.example.com/users/id/")
      .then(response => {
         setCourses(response.data);
         // console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      })
  }, []);

稍后：

{courses.map((course, index) => (                                        
  <ListItem className="button-class" button key={index}>
    <NavLink
      className="link-levels"
      exact
      activeClassName="activeclass"
      to={course.diploma_url}
    >                                                
      {course.diploma_course}
    </NavLink>
  </ListItem>
))}