javascript - 防止组件在上下文更改时重新加载 (React)

Question

我有一个导入和使用 CONTEXT 的组件。在这个组件中，我根据链接道具呈现来自 CONTEXT 的数据。直到现在一切都很好，但是在同一个组件中，我需要能够更新 CONTEXT，这意味着删除我在该组件中实际使用的数据。这当然会导致错误，因为组件由于 CONTEXT 更改而正在刷新。

有谁知道如何防止在 CONTEXT 更改时重新加载组件？

...other imports...
import AllWarriorsContext from '../../contexts/AllWariorsContext';


export default function WarriorPage() {
    let { identy } = useParams(); 
    const [myWarriorsListContext, setMyWarriorsListContext] = useContext(AllWarriorsContext);
    const {number} = myWarriorsListContext.find((e) => e.number === identy)); //destructuring from one of the context object

const deleteMe = () => {
    setMyWarriorsListContext((myWarriorsListContext) => {
            return myWarriorsListContext.filter((e) => {
                return e.number !== identy;
            });
        });
}

    return(
        <>
            <button
                onClick={deleteMe} // after click of course i got an error
            >
                 delete
            </button>
        </>
    );

}

标签： javascriptreactjsreact-context