Где делать вызов фетча?

Question

[Nick-Fisher]

Добрый день. У меня есть таблица с данными и чекбокс. По умолчанию он находится в положении new и подтягивает данные с бэка по соответствующему фетчу(данные из которого пишутся в стейт) и другие данные в положении all. Вопрос в том, где именно мне делать первоначальный вызов. Если в рендере(что очевидно плохо, то он вызовет метод 2 раза, т.к. после сетстейта опять зайдет в рендер), если в компонент дид маунт, то вызов будет всего 1(нету возможно вызывать принудительно, фетч должен происходить в зависимости от чекбокса). Заранее спасибо.

Comments

[davidnum95]

какая версия реакта?

[Nick-Fisher]

davidnum95, 16.5

[davidnum95]

Nick-Fisher, тогда в componentDidUpdate

[Nick-Fisher]

davidnum95, т.е. принудительно вызывать дидмаунты по колбэку от сетстейтов? Я вроде решил вопрос, но просто это как-то костыльно выглядит(

[Андрей Охотников]

Nick-Fisher, didmount нельзя вызывать принудительно, 'в didUpdate также нельзя этого делать чтобы не получилось бесконечного цикла. Только didMount при загрузке, что мешает так сделать? :)

[davidnum95]

Андрей Охотников, если нормально сделать, то в didUpdate не будет никакого бесконечного цикла

[Андрей Охотников]

davidnum95, а зачем в didupdate делать какие то запросы? во первых для этого didmount есть, во вторых если мы будет в didupdate вызывать setstate - то компонент будет бесконечно перерисовываться, а если запретить перерисовку то смысл теряется от этого действия)

[davidnum95]

Андрей Охотников, вы какие то сказки рассказываете. Никто не говорит что в cdu нужно вызывать setState, речь идет о запросе.

[Андрей Охотников]

davidnum95, так автор пишет что данные из запроса пишет в стейт через сетстейт, или я чего то уловил?)

[davidnum95]

Андрей Охотников, и что?

Answer 1

[davidnum95]

Автор, не мучайся https://codesandbox.io/s/821z9l0ym8

Answer 2

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

class Example extends React.Component {
  state = { filter: 'all' };

  componentDidMount() {
    this.props.fetchData(this.state.filter);
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.filter !== this.state.filter) {
       this.props.fetchData(this.state.filter);
    }
  }
  
  render() { /* ... */ }
}

Answer 3

[Андрей Охотников]

Первый фетч в didMount, все последующие при событии onChange на чекбоксе.
Если в рендере вызвать то будет бесконечно вызываться и на этом все закончится)