Reactjs 在react functional组件中使用axios方法从后端获取数据

我在功能组件中使用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

import React，{useState，useffect}来自“React”；
常量示例=（）=>{
const[users，setUsers]=useState（[]）
useffect（（）=>{
Axios.get（“https://www.example.com/users/id/")
。然后（响应=>{
this.setState（{courses:response.data}）
//console.log（response.data）
})
.catch（错误=>{
console.log（错误）
})
}, [])   
返回(
3.课程
{courses.map（（courses，key）=>(
{课程。文凭课程}
))}
)
}
导出默认示例

你没有

这个

这里不是课堂 所以你应该这样理解：

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>
))}

{courses.map（（课程，索引）=>）
{课程。文凭课程}
))}

那么您在哪里定义了

课程

？this.setState（{courses:response.data}）…虽然不是标准规则，但通常不建议在映射的JSX中使用数组索引作为键。我们不知道每个球场的形状，但很可能它们确实有一些独特的属性。