reactjs - react 内存获取结果并仅在新项目添加到列表时再次获取

Question

我有一个函数，可以在单击按钮时使用产品标题对 OpenAI 进行 API 调用以生成食谱。我正在从购物篮中获取产品列表，如果没有新产品添加到购物篮中，我只想在单击按钮时显示相同的结果，而不是再次获取。我只想在将新商品添加到产品列表(购物车)以及单击按钮时再次获取。

我尝试过使用 useMemo，但即使我将产品列表添加到它每次都获取的依赖项数组。

到目前为止，这是我的代码；

const handleClicked = async (event) => {
    event.preventDefault();
   try {
      setLoading(true)
      setDisplayedMessage("Recipe is generating..");
      let productsList = "";

      cartItems.products.forEach((prod, index) => {
         productsList = productsList + prod.title + " ";
      });
      
      const res = await fetch("API_CALL",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({ prompt: "Generate recipe with this items " + productsList })
      });

      const { response: data } = await res.json();
      setResult(data.trimStart());

      if (data === "") {
         throw data.error || new Error(`Request failed with status ${data}`);
      }

      setDisplayedMessage("");
      openModal();

   }catch (e) {
     console.log(e)
   }
}

Answer 1

你没看错，useMemo 是为渲染优化设计的，但和你想的不一样

甚至还有一个等效的函数钩子(Hook)，叫做 useCallback ，但在您的情况下，它不会解决您的问题，因为 useMemo 和 useCallback 在渲染之间保持引用，因此获取这些引用的子组件不会更新渲染(如果引用将更新，它将会更新，这发生在依赖数组中的一个表达式 - 这两个钩子(Hook)的第二个参数 - 更新时)

您的问题与引用无关，而是与您的事件处理程序 handleClicked 的执行有关。即使通过渲染函数引用是相同的，每次点击都会执行。

您需要的是一个引用，您可以将其与 productsList 进行比较，以检查是否要获取，如果是，请更新此引用。为此，您可以使用 useRef

使用 useRef 我会做类似的事情

const productsListRef = useRef('');

const handleClicked = async (event) => {
  event.preventDefault();

  // Just a little bonus on how build your productList variable
  const productList = cartItems.products
  // Here we sort the array in order to make sure the order is always the same
  // So we don't trigger a fetch when the order is different
  .sort((prodA, prodB) => {
    return prodA.title > prodB.title ? 1 : -1;
  })
  // Thanks to array.prototype.reduce we can build a string
  // without reassigning the productList variable, so the code is less error prone
  .reduce((acc, prod) => {
    return `${acc}${prod.title} `;
  }, '');

  const shouldFetch = productsListRef.current !== productList;

  if (shouldFetch) {
    // fetch your data and do all your computation
    // [...]
    // then update the ref
    productsListRef.current = productList;
  }
}