状态不会在反应中保持更新

Question

function App(){
   const [categories, setCategories] = useState([])

   useEffect(() => {
        const initCategories = [
            { name: 'Restaurants', expenses: [], total: 0 },
            { name: 'Travel', expenses: [], total: 0 },
            { name: 'Dessert', expenses: [], total: 0 },
        ];
        setCategories(initCategories);
    }, []);
   
   ...
   
   const deleteCategory = (category) => {
        const updatedCategories = categories.filter(
            (d) => d.name !== category.name
        );
        setCategories(updatedCategories);
    };

}

我试图删除从子组件传递的类别并相应地更新类别状态。我遇到的问题是我的状态没有保持更新。

例如，当我在某种交互中删除一个类别时，我可以看到一个类别消失了，但是当我删除另一个类别时，我之前删除的那个现在又回来了。

预期：

[category1, category2, category3] =(删除类别3)> [category1, category2]

[category1, category2] =(删除类别2)> [category1]

发生了什么：

[category1, category2, category3] =(删除类别3)> [category1, category2]

[category1, category2, category3] =(删除类别2)> [category1, category3]

在我看来，即使组件被重新渲染并且我可以看到视觉上的变化，因为我更新了我的类别状态，但是在下一个 deleteCategory 事件中，我的状态不知何故没有更新，而是回到了它的原始状态。

我很困惑，因为它在视觉上会更新......这告诉我我的状态已更新？任何人都知道为什么会发生这种情况？

Answer 1

发生这种情况是因为 useEffect 每次都重新渲染并将 initCalories 设置回原始值。 试试这个代码：

function App(){
   const [categories, setCategories] = useState([
            { name: 'Restaurants', expenses: [], total: 0 },
            { name: 'Travel', expenses: [], total: 0 },
            { name: 'Dessert', expenses: [], total: 0 },
        ];)

 
   
   ...
   
   const deleteCategory = (category) => {
        let updatedCategories = categories.filter(
            (d) => d.name !== category.name
        );
        setCategories(updatedCategories);
    };

}

Answer 2

我尝试为我运行您的代码，它按预期工作。

我在这里附上我的完整示例，

import React,{useState,useEffect} from "react";
import "./style.css";


export default function App(){
   const [categories, setCategories] = useState([])

   useEffect(() => {
     console.log("useEffetc")
        const initCategories = [
            { name: 'Restaurants', expenses: [], total: 0 },
            { name: 'Travel', expenses: [], total: 0 },
            { name: 'Dessert', expenses: [], total: 0 },
        ];
        setCategories(initCategories);
    }, []);
     const deleteCategory = (category) => {
        const updatedCategories = categories.filter(
            (d) => d.name !== category.name
        );
        setCategories(updatedCategories);
    };

   return (
    <div>
      <Childcomp categories={categories} deleteCategory={deleteCategory}/>
    </div>
  );
} 
function Childcomp(props){
  return (
    <>   
      {
        props.categories.map((cat)=>{
          return <div onClick={()=>{props.deleteCategory(cat)}}>{cat.name}</div>
        })
      }
    </>
  );
}