Запретить перезагрузку компонента при изменении контекста (React) - PullRequest
Новая
       60

Запретить перезагрузку компонента при изменении контекста (React)

0 голосов
/ 14 июля 2020

У меня есть компонент, который импортирует и использует КОНТЕКСТ. В этом компоненте я визуализирую данные из КОНТЕКСТА на основе свойств ссылок. До этого момента все в порядке, но в том же компоненте мне нужно иметь возможность обновлять 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>
        </>
    );

}

1 Ответ

0 голосов
/ 14 июля 2020

На ответ "как предотвратить перезагрузку компонента при изменении КОНТЕКСТА?" Перепишите свой функциональный компонент на компонент класса. Затем вы можете передать свойства своему компоненту и использовать shouldComponentUpdate, чтобы вручную заставить этот компонент не обновляться при изменении свойств. И не используйте useContext или contextType в этом компоненте. Ниже приведен простой пример: 

    import React, { useState, useContext, createContext } from "react";

    const ThemeContext = createContext();

    const themes = {
        dark: {
            color: "white",
            backgroundColor: "rgb(21, 21, 21)"
        },
        light: {
            color: "rgb(21, 21, 21)",
            backgroundColor: "white"
        }
    };

    class Button extends React.Component {
        shouldComponentUpdate(nextProps, nextState) {
            if (this.props.theme !== nextProps.theme) {
            return false;
            }

            return true;
        }
        render() {
            const { toggleTheme, theme } = this.props;
            console.log("render");
            return (
            <button onClick={toggleTheme} style={themes[theme]}>
                Button
            </button>
            );
        }
    }
    const ThemeButton = () => {
        const { theme, toggleTheme } = useContext(ThemeContext);
        return <Button theme={theme} toggleTheme={toggleTheme} />;
    };

    function App() {
        const [theme, setTheme] = useState("light");
        const toggleTheme = () => {
            if (theme === "dark") setTheme("light");
            if (theme === "light") setTheme("dark");
        };
    return (
        <>
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
            <ThemeButton />
        </ThemeContext.Provider>
        </>
    );
    }

    export default App;
...