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

这行不通（提供商中的更改未传播到消费者）。当我将Provider移到父元素时，使用方的每次更改都会使使用者更新。

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

上下文更改未显示在Consumer元素中

2 个答案: