好吧，你不知道该叫什么 setData 在一年之内 useEffect 勾搭 data 作为依赖项，因为这将导致出现无限循环（渲染循环）。
自从 getValues 实用工具已将 response.data 值可能不需要在ui中再次执行此操作。此外，请拆下 data 附属国。

useEffect(() => {
  Axios.getValues()
    .then((result) => {
      setData(result.results);
    });
}, []);

对于 deleteValues 实用程序，如果 console.log("Delete Values: ", response); 显示的值比我认为您需要从 deleteValues .

const deleteValues = (id) => {
  console.log(id);
  const deleteValues = axios
    .delete("https://pokeapi.co/api/v2/type/${id}`)
    .then((response) => {
      console.log("Delete Values: ", response);
      return response; // <-- new data values
    })
    .catch(function (error) {
      console.log(error);
    });
  return deleteValues;
};

然后在 ValuesTable 你需要更新你的 data 使用新删除的值进行状态设置。

{data.map((values) => {
  ...
    <Button
      onClick={() => {
        Axios.deleteValues(values.id)
          .then(data => setData(data));
      }}
    />
  ...
})};

更新

好的，因为 deleteValues 实用程序不返回更新的 data 从后端，您需要手动维护本地状态。我建议在回调处理程序中完成这项工作。成功删除后，更新本地状态。

const [data, setData] = React.useState();

useEffect(() => {
  Axios.getValues().then((result) => {
    setData(result.data);
  });
}, []);

const deleteHandler = id => async () => {
  try {
    await Axios.deleteValues(id); // no error, assume success
    setData(data => data.filter((item) => item.id !== id));
  } catch(err) {
    // whatever you want to do with error
  }
};

return (
  ...
  {data.map((values) => {
    <TableRow/>
    <TableCell>{values.values}</TableCell>
    <TableCell>
      <Button onClick={deleteHandler(values.id)}>
        Delete
      </Button>
    })}; 
  ...
)

注意，我已经写了 deleteHandler 是一个curry函数，因此不需要为按钮的 onClick 处理程序。它包含了电流 id 在回调的“示例”中。

更新2

如果您在后端对数据进行许多不同的更改，那么在每次后端更新之后，使用“获取”状态触发器重新提取（“获取”）数据可能会更容易。无论何时调用更新数据库中的数据，一旦成功，将通过 useEffect 钩子。

const [data, setData] = React.useState();
const [fetchData, setFetchData] = useState(true);

const triggerDataFetch = () => setFetchData(t => !t);

useEffect(() => {
  Axios.getValues().then((result) => {
    setData(result.data);
  });
}, [fetchData]);

const deleteHandler = id => async () => {
  try {
    await Axios.deleteValues(id); // no error, assume success
    triggerDataFetch(); // <-- trigger refetch
  } catch(err) {
    // whatever you want to do with error
  }
};

我认为你在这里错了：

useEffect(() => {
    Axios.getValues().then((result) => {
      setData(result.data); // result has no data property
    });
  }, [data]);

请换成这个

useEffect(() => {
    Axios.getValues().then((result) => {
      console.log("RESULT",result); // check the actually response from API
      setData(result.results); // the response of data is called results
    });
  }, [data]);

import axios from "axios";  const getValues = async () => {  const values = await axios .get("https://pokeapi.co/api/v2/type/")

.then（（response）=>{return response.data；}）。catch（函数（错误）{console.log（错误）；}）；返回值；}；
我不知道为什么，但你想用这个实现什么。您应该使用async/await子句或then子句，但您至少在使用这两个子句之前有一些良好的编码实践。其次，我认为应该在try-catch中使用async-await并删除then/catch短语，以使代码更易于理解，然后如果将结果存储在值中，则只需返回 values.data 你的问题可能会得到解决。

自从 deleteValues 函数从服务器端的数组中删除特定对象，我决定 filter 阵列中的对象列表，以便删除匹配id以反映前端。https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/array/filter
我就是这样做的。

{data.map((values) => {
  ...
    <Button
      onClick={() => {

        setData(data.filter((item) => item.id !== values.id)); // <- Filter

        Axios.deleteValues(values.id)
          .then(data => setData(data));
      }}
    />
  ...
})};