Как передать данные полученные из Ajax в другой компонент React?

Question

[chelkaz]

Добрые день друзья.
Е меня есть два компонента, один фильтр. Другой список продуктов (по умолчанию он пустой)
В компоненте фильтр при выборе раздела, Axios Возвращает продукты этого раздела, я из получаю, все ок.
Но как мне передать теперь в другой компонент что бы распарсить? Ведь событие выбора раздела я могу обработать только в фильтре, а это другой компонент.
На странице эти компоненты в разных местах.
Пример фильтра:

import React, { Component } from 'react';
// Тут еще всякие константы и функции
class SearchTree extends React.Component {
    GetCount = (checkedKeys) => {
        axios
            .post('/url', {products: checkedKeys})
            .then(function (response) {
               //вот товары пришли Как мне их передать в другой компонент?
                console.log(response.data)
             
            })
    }

    onCheck = (checkedKeys, info) => {
    //получаем товары раздела
        this.GetCount(checkedKeys)
    }

    render() {       
        return (
            <div>
                // тут список разделов формируется и onCheck на них
            </div>
        );
    }
}
//тут ReactDOM.render

И вот другой компонент где нужно вывести товары полученные выше

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class AjaxProductList extends React.Component {
    render() {
        return (
            // тут типа UL LI нужно получить товар и вывести списком
        );
    }
}
//тут ReactDOM.render

Comments

[Роман Александрович]

если AjaxProductList потомок SearchTree то можно через пропсы прокинуть
<AjaxProductList data={response.data} >
если нет то подключить Redux

Answer 1

[Антон Спирин]

Ваш фильтр должен лишь переключать какое-то состояние через колбек или redux action. О существовании каких-либо данных или API он знать ничего не должен.

Варианты решения:
1. Lifting state up
2. Redux или аналоги.

Comments

[chelkaz]

Я правильно понимаю, что если я работаю с данными в одном компоненте, то их я не могу передать в другой? Кроме конечно если он дочерний.

[Антон Спирин]

chelkaz, что примерно вам необходимо сделать, если вам не надо выносить состояние фильтра в redux, или вы не используете его:

class Parent extends React.Component {
  state = {
    filter: '',
    data: [],
  };
  
  async fetchData() {
    const { filter } = this.state;
    const { data } = await Api.getPosts(filter);

    this.setState({ data });
  }

  handleFilterChange = filter => {
    this.setState({ filter });
    fetchData();
  };
  
  render() {
    const { data, filter } = this.state;

    return (
      <div>
        <Filter filter={filter} handleFilterChange={this.handleFilterChange} />
        <List data={data} />
      </div>
    );
  }
}

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

[chelkaz]

Антон Спирин, Я сейчас думаю, возможно придется сделать с использованием Parent компонента.
С реактом я почти не знаком. Проект срочный, поэтому приходится читать мануалы ночами.
Сейчас я вообще не вижу его преимущества перед jquery так как мне нужно использовать его только частично. По сути я внедрил его только из за фильтра Он был готовый с tree списком nested. Теперь все и вытекающие.
А вообще получается если я сделаю parent компонент, то я смогу использовать все его функции переменные и события в дочерних?

[Антон Спирин]

chelkaz,

А вообще получается если я сделаю parent компонент, то я смогу использовать все его функции переменные и события в дочерних?

Все верно. Если передаете колбек в другой компонент, то его надо определять стрелочной функцией:

handleSome = () => {

};

или биндить в конструкторе:

constructor(props) {
  super(props);
  this.handleSome = this.handleSome.bind(this);
}

handleSome() {

}

иначе будет потеря контекста.

[chelkaz]

Антон Спирин,
Смотрю документацию и примеры и не пойму, это из за чего?
В компоненте родителя:

Testovik = (val) => {
        console.log("val");
    }
// Далее в рендере
<CollapseFilterCatalog Testovik={this.Testovik} />

А в дочернем:
this.props.Testovik("Прием")
Но в итоге в дочернем ошибка
_this.props.Testovik is not a function