如何在reactstrap列表项上显示来自restapi的值列表

import React, { useEffect, useState } from 'react';
import { ListGroup, ListGroupItem } from 'reactstrap';
import axios from 'axios';

const ValueList = () => {
  const [values, setValues] = useState([]);

  useEffect(() => {
    // 在组件加载时发送GET请求获取值列表
    axios.get('https://api.example.com/values')
      .then(response => setValues(response.data))
      .catch(error => console.error(error));
  }, []);

  return (
    <ListGroup>
      {values.map(value => (
        <ListGroupItem key={value.id}>{value.name}</ListGroupItem>
      ))}
    </ListGroup>
  );
}

const App = () => {
  return (
    <div>
      <h1>值列表</h1>
      <ValueList />
    </div>
  );
}

export default App;