尽管已设置，但我的状态未定义

Question

我是 React 和 api 消费的新手，我们正在为一个大学项目使用我们自己的 api 服务，我们在页面组件之一使用的服务中有这个 get 方法

export const getProductCostumer = async (costumerid, state) => {
  let data = await api
    .get(`ProductCostumer?costumerid=${costumerid}`)
    .then((result) => result.data);
  state(data);
  return data;
};

页面加载时，它表示尽管在正在使用的组件上设置了 get 方法中的状态，但状态未定义

const [data, setData] = useState([]);
  const Params = useParams();

  const showAlert = (id) => {
    swal({
      title: "Delete",
      text: "Are you sure you want to delete this?",
      icon: "warning",
      buttons: ["Cancel", "Confirm"],
    }).then((answer) => {
      if (answer) {
        deleteProductCostumer(id);
        swal({
          title: 'Deleted',
          text: 'Price has been deleted',
          icon: 'success',
        }).then(function () { window.location.reload() });

      }
    });
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await getProductCostumer(Params.costumerid, setData);
        setData(response);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };
    fetchData();
  }, [Params.costumerid]);

以前，costumerid 也发生过相同的未定义错误，但使用 Params 解决了这个问题，状态未定义的情况可能是什么？语法不好请见谅

尝试更改 useEffect 并获得相同的结果，试图超越未定义状态

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await getProductCostumer(Params.costumerid, setData);
        const responseData = response.data;
        console.log(responseData);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };
    fetchData();
  }, [Params.costumerid]);

Answer 1

你的第一个片段中有一些废话：

1. 这是一个函数，它返回有用的数据。那么，为什么传递回调作为参数来设置相同的数据？

2. 您正确地为 api 调用添加了

   await

   前缀。但是，您稍后会使用 then。您应该选择使用

   async

   /

   await

   或回调风格，而不是一起使用。

我们来调整一下代码：

export const getProductCostumer = async (costumerid) => {
  let result = await api
    .get(`ProductCostumer?costumerid=${costumerid}`);
  return result.data;
};

我让您检查其余的代码。