Reactj.s:仅在刷新后删除的项目

Question

我试图发送一个删除请求，从API中删除一个项目。单击该按钮时，API请求是可以的。但是只有在刷新浏览器之后才会删除项目！我不太确定是否应该为SetHamsterDeleted添加任何参数才能正常工作？

这就是我的代码。

​

import React, {useState} from "react";
const Hamster = (props) => {

   const [hamsterDeleted, setHamsterDeleted] = useState("")


  
    async function deleteHamster(id) {
        const response = await fetch(`/hamsters/${id}`, { method: "DELETE" });
        setHamsterDeleted()
        
    
        }

              
         return (
            <div>
             <p className={props.hamster ? "" : "hide"}>
                 {hamsterDeleted}
             </p>
             
            <button onClick={() => deleteHamster(props.hamster.id)}>Delete</button>
            <h2>{props.hamster.name}</h2> 
            <p>Ålder:{props.hamster.age}</p> 
            <p>Favorit mat:{props.hamster.favFood}</p> 
            <p>Matcher:{props.hamster.games}</p> 
            <img src={'./img/' + props.hamster.imgName} alt="hamster"/> 
            </div>
              )
        };
    
        
    

export default Hamster;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

​

Answer 1

假设您有一个父组件(例如HamstersList)，它返回/呈现这些Hamster组件的列表--最好在其中声明deleteHamster方法，因此它可以这样做：( a)将一些像hidden这样的道具传递到每个Hamster或b)在一个被“删除”的目录中删除本地存储在该父列表组件中的数组中的所有仓鼠列表。

但是，由于您试图在Hamster本身中对此进行归档，很少有更改可能会对您有所帮助：

const [hamsterDeleted, setHamsterDeleted] = useState(false)

• 将state行更改为

等待获取后，

• 在deleteHamster方法中调用setHamsterDeleted(true)。

在返回内部对“条件呈现”进行的一种小调整，当当前的truereturn hamsterDeleted ? null : (<div>*all your hamster's content here*</div>)设置为时，实际上不呈现任何内容。

Answer 2

如果仓鼠被删除，你想做什么？如果您不想返回任何内容，可以只返回null。

--我不太确定是否应该向SetHamsterDeleted添加任何参数才能正常工作？

是的，我会把它变成布尔型的。下面是一个例子：

import React, { useState } from "react";

const Hamster = (props) => {
    const [hamsterDeleted, setHamsterDeleted] = useState(false);

    async function deleteHamster(id) {
        const response = await fetch(`/hamsters/${id}`, { method: "DELETE" });
        setHamsterDeleted(true);
    }

    if (hamsterDeleted) return null;

    return (
        <div>
            <p className={props.hamster ? "" : "hide"}>
                {hamsterDeleted}
            </p>
            
            <button onClick={() => deleteHamster(props.hamster.id)}>Delete</button>

            <h2>{props.hamster.name}</h2> 
            <p>Ålder:{props.hamster.age}</p> 
            <p>Favorit mat:{props.hamster.favFood}</p> 
            <p>Matcher:{props.hamster.games}</p> 
            <img src={'./img/' + props.hamster.imgName} alt="hamster"/> 
       </div>        
    );
};

不过！让每个仓鼠跟踪其删除的状态听起来不正确(当然，我不知道您的所有要求，但这似乎很奇怪)。我猜你有一个能抓取所有仓鼠的父组件--这将是一个更好的地方来记录哪些已经被删除，哪些没有被删除。那样的话，如果仓鼠被删除，你就不能渲染那只仓鼠了。更像是这样的：

const Hamsters = () => {
    const [hamsers, setHamsters] = useState([]);

    // Load the hamsters when the component loads
    useEffect(() => {
        const loadHamsters = async () => {
            const { data } = await fetch(`/hamsters`, { method: "GET" });
            setHamsters(data);
        }

        loadHamsters();
    }, []);

    // Shared handler to delete a hamster
    const handleDelete = async (id) => {
        await fetch(`/hamsters/${id}`, { method: "DELETE" });
        setHamsters(prev => prev.filter(h => h.id !== id));
    }

    return (
        <>
            {hamsters.map(hamster => (
                <Hamster 
                    key={hamster.id}
                    hamster={hamster}
                    onDelete={handleDelete} 
                />
            ))}
        </>
    );
}

现在，您只需将Hamster组件变成只关心渲染仓鼠的表示组件，例如：

const Hamster = ({ hamster, onDelete }) => {
    const handleDelete = () => onDelete(hamster.id);

    return (
        <div>
            <button onClick={handleDelete}>Delete</button>

            <h2>{hamster.name}</h2> 
            <p>Ålder:{hamster.age}</p> 
            <p>Favorit mat:{hamster.favFood}</p> 
            <p>Matcher:{hamster.games}</p> 
            <img src={'./img/' + hamster.imgName} alt="hamster"/> 
       </div>        
    );
};