У меня есть компоненты внука, которые потребляют от своих дедушек и бабушек. Однако значение контекста не определено:
Файл1:
export const WTContext = createContext();
export default class A extends Component {
...
render(){
...
const contextValue = {state: { items: [] }, actions: { doA: () => {}}}
return (
<WTContext.Provider value = {contextValue} >
...
</WTContext.Provider>
}
}
}
Файл2:
export default function B(){
return (
<WTContext.Consumer>
{({state}) => (
...
return (
<div>
{state.items.map(...<C/>)} //all good, B use context.
</div>
{state.items
)
)}
</WTContext.Consumer>
)
}
Файл3:
export default function C(props){
return (
<WTContext.Consumer>
{({ state, actions }) => {
// <-- Cannot read property 'state' of undefined
...
}
</WTContext.Consumer>
)
}
Таким образом, отображение в B
, которое отображает несколько компонентов C
, имеет контекстное потребительское значение undefined
.
Импорт действителен, но я не могу понять, почему значение, которое передает поставщик, равно undefined
на 2-м уровне вложенности (поскольку первый уровень кажется нормальным, B
использует контекст по запросу).
На самом деле он импортирован правильно. Когда я отлаживаю Chrome, итерация показывает действия и значения состояния, как и ожидалось. Но когда я отпускаю отладчик, я получаю сообщение об ошибке. Так досадно, смешно. Говоря о предыдущей реализации, когда использовалось (контекст) ..
Вероятно, это проблема, когда вы какой-то мутацией переопределяете значение контекста на null, если вы можете создать воспроизводимую демонстрацию, я могу попытаться отладить вашу проблему
Обновил мою скрипку jsfiddle.net/c7bqpeyn/3, у меня работает вложенно.
создать контекст с помощью React.createContext()
import React, { Component } from 'react';
// Create new context
export const MyContext = React.createContext();
export class MyProvider extends Component {
render() {
const contextValue = {state: { items: [] }, actions: { doA: () => {}}}
return (
<MyContext.Provider value = {contextValue}>
.....
</MyContext.Provider>
)
}
}
Если он работает в Компоненте B, другой человек определенно импортирует createContext как именованный импорт из React.
ОБНОВИТЬ:
По-видимому, это была проблема третьей стороны. Я использовал библиотеку google-map-react и заметил, что они удалили поддержку Context API для тех, кто использует React версии <15, и выпустили исправление в следующем крупном выпуске.
Возможно в компоненте C Контекст не импортирован правильно. Я создал демонстрационный код-код, чтобы проиллюстрировать работу вложенных потребителей codeandbox.io/s/r79ym626no. Не могли бы вы создать воспроизводимую демонстрацию своей проблемы