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。

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

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

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

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

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

1 个答案: