状态更改后功能组件不会重新渲染

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 状态代码？这些可能无法处理）

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

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

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