Отправка запроса ajax с данными состояния при изменении состояния

У меня есть компонент реакции, в котором я использую выбор даты. Основываясь на значении Дата, я отправляю запрос ajax для извлечения данных. Я не использую никаких фреймворков, таких как сокращение или поток.

export default class MyComponent extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        // Initial fetch request based on the default date
    }

    onDateSelectionChanged(fromDate, toDate) {
        this.setState({
            fromDate,
            toDate
        });
    }

    render() {
        return (
            <div className="row">
                <DateRangePicker callBackParent = {this.onDateSelectionChanged}/>
                {/* other stuff */}
            </div>
        );
    }
}

Теперь предположим, что я изменил дату на другую дату. Каков наилучший способ получить данные снова? должен ли я снова запустить запрос в onDateSelectionChanged или существует ли какой-либо метод жизненного цикла?

Ответы

Ответ 1

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

Используя Flux, вы можете быстро создать инфраструктуру для обработки как визуализации пользовательского интерфейса, так и любой другой логики для вашего приложения.

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

Добавьте 4 класса, которые будут вашей инфраструктурой:

YourComponentActions - этот класс будет обрабатывать "действия", которые ваш компонент будет запускать. Фактически действие - это событие, которое будет запущено из вашего компонента в нечто, что будет выполнять фактическую логику (пункт 4).
SharedConstans - этот класс будет содержать имена событий вашего приложения.
AppDispatcher - этот класс будет управлять обработкой событий вашего приложение.
YourComponentStore - этот класс будет регистрироваться в событии действия и обрабатывать http-вызов. Вот логика вашего компонента, которая отделена от пользовательского интерфейса. После того, как вы получите ответ от своего аякс-звонка, вы запустите другое событие из своего магазина, и ваш компонент зарегистрируется на нем, а затем обновит состояние.

Сложно, но с этого момента вы легко добавите какую-либо логику в свое приложение, сохраняя ее развязанной, читаемой и простой в обслуживании. Подробнее о Flux здесь.

Ответ 2

Вы должны запустить другой сетевой запрос в onDateSelectionChanged, там нет метода жизненного цикла, когда изменяется состояние.

С технической точки зрения, вы можете сделать некоторую логику в componentWillUpdate (или, что еще хуже, shouldComponentUpdate), чтобы сделать запрос, когда это поле состояния изменится, и оно будет работать, но вы не должны. Оба этих метода жизненного цикла имеют четко определенные цели, что делает сетевые запросы менее четкими и сложными для вашего кода.

Ответ 3

Если вы действительно настаиваете на отправке запроса из вашего метода компонента, то его запуск в onDateSelectionChanged определенно является для вас способом. Поскольку он реагирует на каждое изменение Дата, это, естественно, единственный метод, способный удовлетворить ваши потребности, а методы жизненного цикла не имеют прямого представления о смене даты или в нужном месте сделать это. Реализация чего-то подобного, например, componentWillUpdate или componentDidUpdate может привести к циклическому исполнению, и это не то, с чем вы хотите столкнуться без уважительной причины.

Говоря о методах жизненного цикла, единственный, явно рекомендуемый для запуска запросов, - это метод componentDidMount, где у вас есть хорошая возможность выполнить некоторые операции инициализации ajax, как вы можете видеть в docs, но ни один из них не подходит для обычной выборки данных.

С другой стороны, я предлагаю вам действительно взглянуть на Flux, который является решением многих проблем, разделение проблем. Ваша проблема заключается в том, что вы привязываете свой компонент к созданию запросов Ajax, что не способствует повторному использованию и затрудняет работу с вашим кодом. Подумайте о компонентах в качестве инструментов для представления контента и захвата пользовательских входов, беспокойства в отношении запросов и ответа или обработки и хранения входящих данных не должно быть их проблемой (по крайней мере в более крупном масштабе).

Конечно, вы можете разделить своих создателей запросов на внешние функции, но если вы склонны писать React frontend, вы рано или поздно столкнетесь с такими проблемами, как передача props по многим промежуточным компонентам или распространению событий с помощью вашей иерархии компонентов, которая очень утомительна и беспорядочна без какой-либо архитектуры, а Flux - лучшее решение для этих проблем и, следовательно, технология номер один для изучения - если вы серьезно относитесь к ней с React.

Ответ 4

onDateSelectionChanged(fromDate, toDate) {
    var self = this; // we can not use this inside ajax success callback function
    this.setState({
        fromDate,
        toDate
    }, function() { // callback fires after state set
        // your ajax request goes here, let say we use jquery
        $.ajax({
           url: fetch_url, success: function(data) {
               // again we can setState after success, but be careful
               // we can not use "this" here instead we use "self"
               self.setState({
                   someState: data.someValue
               })
           }
        })
    });
}