Почему useContext () не возвращает значение поставщика, а не возвращает начальное значение? - PullRequest
Новая
       80

Почему useContext () не возвращает значение поставщика, а не возвращает начальное значение?

0 голосов
/ 07 августа 2020 
import React, { useContext, createContext } from "react";

const messageContext = createContext("Hello");

const Context = () => {

    const message = useContext(messageContext);

    return (
        <messageContext.Provider value="Hi">

            <div style={{ marginTop: 1000 }}>{message}</div> 
            {/* Result: Hello */}

            <messageContext.Consumer>
                {message => {
                    return <div style={{ marginTop: 1000 }}>{message}</div>;
                }}
            </messageContext.Consumer>
            {/* Result: Hi */}

        </messageContext.Provider>
    );
};
export { Context };

Я хочу использовать ловушку useContext () , но она всегда возвращает начальное значение « Hello ».

Использование не имеет проблем. Он возвращает « Hi », но я хочу использовать ловушку useContext.

1 Ответ

1 голос
/ 07 августа 2020

Когда вы берете что-то из контекста, вы получаете это от ближайшего провайдера вверх дерева компонентов. Поскольку вы вызвали useContext внутри компонента Context, он будет искать поставщика выше по дереву, чем Context. Ничего не существует, поэтому вместо этого вы получите значение по умолчанию. Ваш пример с messageContext.Consumer находится внутри поставщика, поэтому он может видеть это значение.

Нет особых причин использовать значение в том же самом компоненте, в котором вы его предоставляете. Чтобы предоставить значение, у вас, вероятно, есть некоторый logi c, который приводит к локальной переменной, и вы можете повторно использовать эту же локальную переменную для любых других частей компонента, которые в ней нуждаются.

...