Изменение в контексте не отображается в элементе Consumer

Question

Я установил контекст, поля которого обновляются вызовом API:

export const CharacterContext = React.createContext()

export class CharacterProvider extends Component {
    constructor(props) {
        super(props);

        this.state = {
            text: "test, test",
            name: "no-name",
            id: "999",
            currStamina: 0,
            abilities: {
                "bra": 0,
                "agi": 0,
                "int": 0,
                "cun": 0,
                "will": 0,
                "pre": 0
            },

            skills: [],
            characters: [],
            getCharacter: this.getCharacter,
        }
    }

    getCharacter = (id) => {
        CharacterDataService.getCharacterById(id)
            .then(
                response => {
                    console.log(response);
                    this.setState({
                        name: response.data.username,
                        maxStamina: response.data.stamina,
                        currStamina: response.data.stamina,
                        id: response.data.id,
                        abilities: response.data.abilities,
                        skills: response.data.skills
                    });
                }
            );
    }


    render() {
        return (
            <CharacterContext.Provider
                value={this.state}>
               {
                   this.props.children
               }
            </CharacterContext.Provider>
        )
    }
}


export const CharacterConsumer = CharacterContext.Consumer

Еще один элемент поместил Провайдера и Потребителя внутрь для целей тестирования. Он получает состояние от провайдера, но даже если элемент отображается ПОСЛЕ обновления контекста (через маршрутизатор), он показывает исходные значения (возможности установлены на 0 и т. Д.).

export default class Edit extends React.Component {
    static contextType = CharacterContext;
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <CharacterProvider>
                <CharacterConsumer>
                    {({text, currStamina}) => (
                        <p>{text} : {currStamina}</p>
                    )}
                </CharacterConsumer>
                <Abilities/>
            </CharacterProvider>
        )
    }
}

Чего мне не хватает? Почему значения в контексте обновляются вызовом API, но потребительский элемент по-прежнему показывает исходные значения?

Answer 1

По какой-то причине проблема заключалась во вложении элемента потребителя непосредственно под провайдером.Что не сработало:

render() {
        return (
            <CharacterProvider>
                <CharacterConsumer>
                    {({text, currStamina}) => (
                        <p>{text} : {currStamina}</p>
                    )}
                </CharacterConsumer>
                <Abilities/>
            </CharacterProvider>
        )
    }

Это не сработало (изменение провайдера не распространялось на потребителя).Как только я переместил поставщика в родительский элемент, потребитель обновлялся при каждом изменении поставщика.

 render() {
        return (
            <div>
                <CharacterConsumer>
                    {({text, currStamina}) => (
                        <p>{text} : {currStamina}</p>
                    )}
                </CharacterConsumer>
                </div>
        )
    }

Answer 2

По моему это проблема роутера. Можете ли вы проверить, отображаются ли <Link /> компоненты вне контекста маршрутизатора. Если отображается вне маршрутизатора, это означает, что ссылки будут возвращаться к значению по умолчанию, переданному в createContext.