React上下文消费者不会更新(但提供商)

Question

我有一个带有几个组件的相当简单的应用程序，其中2个需要具有单向状态份额。它们俩都相距很远，所以我试图使用ReactContext。

React 16.8.23

问题是，虽然提供商确实更新了状态，并且上下文也在改变它 - 消费者根本不会改变。

这是有问题的两个组件：

提供商

class VG extends Component {
    constructor(props) {
        super(props);
        this.state = {
             id:[24]
        };
    }

    onSelect = (_, value) => {
        this.setState(value)
    }

    render() {
        return (
        <ListingContext.Provider value={this.state}>
            <ContainerDimensions>
                { ({ width, height }) => {
                    spec.width = width;
                    spec.height = height;
                    return <Vega spec={spec} onSignalSelectPoint={this.onSelect}/>
                }}
            </ContainerDimensions>
        </ListingContext.Provider>
        );
    }
}

和消费者

class Info extends Component {

    render() {  
        return (
            <ListingContext.Consumer>
            {
                selected => (
                <Paper elevation={10} style={{"margin":`20px`, "height":`calc(100% - 64px)`}} >
                    <Typography variant="h5" component="h3">
                        Here is the listing id: {selected.id[0]}
                    </Typography>
                    <Typography component="p">
                        Listing's info
                    </Typography>
                </Paper>
                )
            }
            </ListingContext.Consumer>
        )
    }
}
export default Info;

在这里，无论哪种

Answer 1

Info组件似乎不在VG下。

这有效：

<MyProvider>
  <MyConsumer />
</MyProvider>

这不是：

<MyProvider>
  <SomeOtherNode />
</MyProvider>
<MyConsumer />