Как мы можем остановить повторные вызовы в жизненном цикле componentDidUpdate () компонента на основе класса, как мы это делаем в хуке useEffect?


    useEffect(()=>{
        fetch(`${BASE_URL}/requested_url`)
          .then(response => response.json())
          .then(json => setData(json))
      }, []);

Когда я использовал компонент на основе классов, мне приходилось использовать логическое состояние, чтобы указать, когда начинать выборку и останавливаться ... Что-то очень странное, что я пытался выполнить работу, но мне все еще любопытно узнать, можем ли мы также может остановить повторный вызов запроса в методе жизненного цикла componentDidUpdate ().


    componentDidUpdate() {
        if (this.state.show2) {
          return fetch(`${BASE_URL}/requested_url`)
            .then(response => response.json())
            .then(json => setState({
              data: json,
              show2: false
            }))
        }
        return;
      }

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


reactjs react-functional-component react-class-based-component react-lifecycle-hooks react-lifecycle
person Yash Datir    schedule 10.05.2020    source источник
comment
componentDidUpdate (prevProps, prevState) {} - вы можете использовать параметр prevState, чтобы определить, изменилось ли состояние или нет. Например, if (prevState.show2! == this.state.show2) {// сделаем ваш запрос}   -  person Andrey Radkevich    schedule 10.05.2020
comment
вы должны создать какое-то условие, при котором вы запрашиваете   -  person Andrey Radkevich    schedule 10.05.2020

Ответы (1)


arrow_upward
0
arrow_downward

Второе свойство в useEffect - это массив зависимостей. По сути, любая внешняя переменная, используемая в эффекте, должна быть помещена туда, потому что функция будет запускаться только тогда, когда они изменят значение.

  useEffect(()=>{
    if (show2)
      fetch(`${BASE_URL}/requested_url`)
        .then(response => response.json())
        .then(json => setData(json))
  }, [show2]);
person Jack    schedule 10.05.2020
comment
мы не можем использовать Hook в компоненте на основе классов, верно? поскольку QA упоминается, он хочет заархивировать его в компоненте на основе классов. - person dipenparmar12; 29.06.2021