React с запросами к серверу без redux

154
26 мая 2019, 04:00

исследую возможности реакт. redux не использую по незнанию и отсутствию времени. Задача такова. Есть две формы select, первая "курс", вторая "тема" Поначалу форма темы скрыта и пустая, а в форму курса приходит значение от сервера при загрузке. На форму курса повешено событие, которое делает запрос к бд. Сутью запроса является, выбрать все темы выбранного курса и соответственно после этого необходимо от рисовать форму темы. Проблема я полагаю в том, что даже если задать метод, который будет менять состояние, то возникает проблема, рендер то синхронный, а данные приходят из асинхронного обещания. В общем у меня рендерит пустоту. Я отлично понимаю, что делаю кучу костылей и подобные задачи хорошо бы возложить на механизм redux, но хочу узнать хотя бы концептуально, как это сделать на чистом React

Answer 1

Асинхронные запросы без redux вплоне имеют себе место на жизнь вместе c React: демо и вот его код.

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

Answer 2

Возможно глянув в код вам станет более понятна логика работы с БД внутри компонента

import React, { Component } from 'react' 
 
export default class ThemesList extends Component { 
  constructor() { 
    super() 
    this.state = { 
      themes: [], 
      isLoading: true 
    } 
  } 
 
  async componentDidMount() { 
    this.setState({ 
      themes: await getThemes(), // где getThemes это ваша функция для получения данных из БД (в этом примере я предполагаю что она возвращает массив тем) 
      isLoading: false 
    }) 
  } 
 
 
  render() { 
    const { isLoading, themes } = this.state 
 
    if (isLoading) return <div>Loader...</div> 
    return( 
      <ul> 
        {themes.map(theme => <li key={theme.id}>{theme.name}</li>)} 
      </ul> 
    ) 
  } 
}

READ ALSO
Как мне собрать 4 маленьких треугольника, чтобы сделать большой треугольник?
javascript

Как мне собрать 4 маленьких треугольника, чтобы сделать большой треугольник?

Я хочу создать на фоне треугольник с изображениями, путем соединения 4-х треугольников, например:

 135
Изменить внутренний блок iframe
javascript

Изменить внутренний блок iframe

Столкнулся с проблемой, не могу добраться до внутренних данных iframe, через метод jquerycontents()не получается, я так понимаю потому что на момент...

 120
Не хочет срабатывать ID со слешем [дубликат]
javascript

Не хочет срабатывать ID со слешем [дубликат]

На данный вопрос уже ответили:

 137
laravel mix babel
javascript

laravel mix babel

Помогите разобратьсяИмеется IE 11, который как я понимаю использует ECMAScipt2015, в котором НЕТ поддержки exponentiation (**) operator

 125