Невозможно обмениваться данными между различными компонентами, используя реагирующий контекст. - PullRequest
Новая
       5

Невозможно обмениваться данными между различными компонентами, используя реагирующий контекст.

0 голосов
/ 17 марта 2020

Создано два компонента, таких как класс (AB C) и функция (XYZ) соответственно. Оба являются независимыми компонентами. загрузка данных таблицы в компонент AB C и попытка передать их компоненту XYZ с помощью Context. Я не понимаю, где именно совершают ошибку. см. код ..

внутри AB C. js

//excluding imports
export const MContext = React.createContext();
export default class ABC extends Component {
. //inside componentDidMount(){} loading resultsArray
.
.
.
handleClick(){
        this.showGrid = true;
}
 render() {
        return (
            <div>
                <MContext.Provider value={{resultsArray}} >

                </MContext.Provider>
.
.
.
<div>
   <button  onClick = {this.handleClick}>Submit</button>
   { this.state.showGrid ? <XYZ/> : null }
 </div>
</div>
}

и внутри XYZ. js

const rows = [];
export default function XYZ() {

    <div>
        <Mcontext.Consumer>
            {(context) => (
                rows = context.value
            )}
        </Mcontext.Consumer>
    </div>
.
.
.
}

Но здесь я не могу перевести resultsArray [] в строки [], получаю исключение:

Ожидается присваивание или вызов функции, и вместо этого я увидел выражение

в XYZ. js, любая подсказка будет оценена.

Примечание: <div><Mcontext.Consumer> ... находится внутри функции render ()

1 Ответ

0 голосов
/ 17 марта 2020

context api в реагировать используется только для передачи данных от родительских к дочерним компонентам. Это в основном позволяет избежать передачи props вниз по дереву для нескольких уровней. 

   <MContext.Provider value={value} >
            <Component/>
    </MContext.Provider>

, выполняя это Component и все его дочерние элементы могут получить доступ к значению context.

В вашем случае контекст нельзя использовать для обмена данными между независимыми компонентами. В таком случае вам нужно оживить состояние. Здесь 

<MContext.Provider value={{resultsArray}} >

 </MContext.Provider>

вы не обернули Context.Provider каким-либо Компонентом. Так что это не сработает

...