useContext返回组件子项中未定义的getState

问题描述

我在访问子组件中的上下文时遇到问题，这使我无法定义

router.js

class Home extends Component {
  render() {
    let { url } = this.props.match

return (
  <div className='container-main'>
    <Menu baseUrl={url} />
    <Switch>
      <Route exact path={`${url}/tasksVision`} component={Home} />
    </Switch>
  </div>
   )
  }
}

export default Home

index.js

import React from 'react';
import { PedidosProvider } from '../../../context/components/pedidos-pedidosVolume';
import Modal from './modal';

const Pedido = (props) => (
    <PedidosProvider {...props}>
        <Modal />
    </PedidosProvider>
)

export default Pedido;

modal.js

在该组件上调用时，此const“测试”确实有效

const Modal = () => {
    const {
       test
    } = useContext(PedidosContext)

    return (
        <div>
          {test}          //this is working
          <Orders/>
        </div>
       )
}

orders.js

在该组件上调用此const“测试”不起作用

import React,{ useContext } from 'react'
import { PedidosContext } from '../../../context/components/pedidos-pedidosVolume'

const Teste = () => {
    const { test } = useContext(PedidosContext) // this return: Cannot read property 'test' of undefined
    return (
        <h1>{test}</h1>
    )
}
    
export default Teste

解决方法

我还没有使用过上下文API，但是我认为您正在出错，因为您正在破坏PedidosContext。

const { test } = useContext(PedidosContext)

应该是

const test = useContext(PedidosContext)

尽管可能我的答案不是您想要的。但是，在docs中，它的使用方式与我刚刚描述的相同。