javascript - 状态更改后功能组件不会重新呈现

Question

我想问一下，为什么我的组件在我的状态改变后没有重新渲染，我需要刷新它(在路由之间切换)才能看到变化。好吧，有趣的是，当我第一次点击删除按钮页面(组件)时并没有重新呈现，但是在我切换路线并返回后，该项目被删除，当我尝试删除其他项目时，它立即被删除，不像第一次。

这是我的代码:

import React, {useEffect, useState} from 'react';
import ApiFactory from '../mock';
import Editor from '../Editor';
import ProductCard from '../components/product-card/product-card';
import ProductEdit from '../components/product-edit/product-edit';

export default function Admin() {
  const [items, setItems]= useState([]);
  useEffect(() => {
    getProducts();

  }, [items]);

  function getProducts() {
    ApiFactory.getInstance().get('/api/products')
      .then((res) => {
        if(res.status == 200) {
          setItems(res.data);     
        }
      })
      .catch((error) => { console.log(error)}) 
  }

  function handleDelete (productId) {
    ApiFactory.getInstance().delete(`/api/products/${productId}`)
     .then(()=> getProducts()
    );
  }

  return (
    <>
     {
      items.map((item, index) => {
        console.log(item.id)
        return <>
          <div key={index}>
            <ProductCard product={item}></ProductCard>
            <button onClick={() => handleDelete(item.id)}>Delete</button>
          </div>
          </>
      }) 
    }
    </>
  );
}

我是 React 的新手，有人可以解释为什么会发生这种情况以及我该如何解决它吗？

Answer 1

我相信这是因为您如何设置 useEffect。

1. 将 useEffect 更改为仅调用一次 GET API(在初始加载时):

   useEffect(() => {
       getProducts();
   
     }, []); // remove the dependency here. You may have made an infinite        loop here.
   
     const getProducts = () => {
       ApiFactory.getInstance().get('/api/products')
         .then((res) => {
           if(res.status == 200) {
             setItems(res.data);    
           }
         })
         .catch((error) => { console.log(error)}) 
     }
   

如果您确认 API 调用正在处理您的错误/成功(您是否收到非 200 状态代码？这些可能不会被处理)

1. 将错误捕获添加到 handleDelete 以确保此调用有效。

   const handleDelete = (productId) => {
       ApiFactory.getInstance().delete(`/api/products/${productId}`)
       .then(getProducts())
       ).catch((error) => { console.log(error)}) 
   }
   

您还可以按照另一位用户的建议进行操作，将更多逻辑从 API 调用中移开(虽然不是必需的)以在本地拥有状态而不是从 API 重新获取数据。