有很多地方需要改进才能运行代码，
1.你没有从map函数返回数据。您需要从map返回JSXElement。
1.您正在创建不必要的方法fetchData。
下面是你的工作代码：

import { useState } from 'react';
import axios from 'axios'

export default function Datateacher() {
  const [result, setResult] = useState([]);

  const handleClick = async () => {
    const result = await axios.get(`http://localhost:8000/state`, { mode: 'no-cors' });
    setResult(result.data)
  };

  return (
    <div>
      <button type="button" onClick={handleClick} >
        Get studentdata
      </button>
      <ul>
        {result.map((result) => <h1>{result.data}</h1>)}
      </ul>
    </div>
  )
}

您正在尝试呈现data字段，该字段在result中不存在。
试试这样的方法：

<h3>
 {
   result.map(item => item.id)
 }
</h3>

你提供的代码中有几个地方是错误的。
首先，为什么你的fetchData()函数位于handleClick()函数中？
您可以删除handleClick()函数。它不是必需的，因为它只是用来调用另一个函数（fetchData()）。

const fetchData = async () => {
  const result = await axios.get(`http://localhost:8000/state`, { mode: 'no-cors' });
  setResult(result.data) 
};

因此，在单击按钮时，您只需调用fetchData()。
此外，当您检索多个项目时，您的状态应该是[results, setResults]（可读性很重要）。
然后你Map你的元素，像这样：

results.map(result => result)

首先，你有一个收集，你超越，然后你有一个项目。
最后一件事，你试图在结果项中获取一个名为data的键，但这个键不存在。试试result.id。

您将以学生对象数组的形式获取数据。如果你想显示数据，那么你需要解析数组，然后解析各个对象的属性。对于ex：results.data[0].id，这将显示第一个student对象的ID。

我很抱歉代码错误，因为我不能清楚地看到fetchData（）是完全不必要的，这是因为我之前使用了另一个方法。但它现在工作，这是数据属性，给了问题，谢谢！

您没有正确Mapresult状态（项目上没有data字段）。下面是一个显示学生姓名的例子：

import React, { useState } from "react";
import axios from "axios";

export default function Datateacher() {
  const [result, setResult] = useState([]);

  const handleClick = async () => {
    const fetchData = async () => {
      const result = await axios.get(`http://localhost:8000/state`, { mode: "no- cors" });

      console.log(result.data);
      setResult(result.data);
    };

    fetchData();
  };

  return (
    <div>
      <button type="button" onClick={handleClick}>
        Get studentdata
      </button>
      <ul>
        <h3>
          {result.map((item) => (
            <p>{item.name}</p>
          ))}
        </h3>
      </ul>
    </div>
  );
}