上下文更改未显示在消费者元素中

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

另一个元素为了测试，在里面设置了Provider和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

我认为这是路由器问题。您能否检查 <Link /> 组件是否在路由器上下文之外呈现。如果在路由器外部呈现，这意味着链接将回退到传递给 createContext.

的默认值

Answer 2

由于某种原因，问题出在将消费者元素直接嵌套在提供者之下。什么不起作用：

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>
        )
    }

上下文更改未显示在消费者元素中

Change in Context doesn't show in Consumer element

reactjs

react-context