Для чего нужно использовать render() в reactjs?

Question

[n1ksON]

Изначально было так

function App() {
  gettingWeather = async() => {
    const apiUrl = await 
    fetch(`http://api.openweathermap.org/data/2.5/weather?q=Kiev&appid=${apiKey}&units=metric`);
    const data = await apiUrl.json();
    console.log(data);
  }
  return (
    <div className="App">
      <Info />
      <Weather />
      <Form 
        weatherMethod={this.gettingWeather}
      />
    </div>
  );
}

Выдавало ошибку, что метод gettingWeather is not defined.
Изменил App на класс и добавил туда render():

class App extends React.Component {
  gettingWeather = async() => {
    const apiUrl = await 
    fetch(`http://api.openweathermap.org/data/2.5/weather?q=Kiev&appid=${apiKey}&units=metric`);
    const data = await apiUrl.json();
    console.log(data);
  }
  render() {
  return (
    <div className="App">
      <Info />
      <Weather />
      <Form 
        weatherMethod={this.gettingWeather}
      />
    </div>
  );
  }
}

В итоге заработало. Можете объяснить в каких случаях нужно использовать function а в каких class extends с render?

Comments

[Yustas Alexu]

Может стоит почитать что такое this для начала? Реакт в данном случае вообще не при чем.

[n1ksON]

Yustas Alexu, this - грубо говоря, это ссылка на объект. А при чём тут this? Можете объяснить?

[Pavel Shvedov]

n1ksON, в первом случае функция gettingWeather это просто локальная переменная внутри тела функции-компонента (только по хорошему объявить ее нужно было как const gettingWeather = ....), чтоб обратиться к ней не нужно использовать this, просто weatherMethod={gettingWeather}, во втором случае это метод класса-компонента, поэтому к ней нужно обращаться через this

Answer 1

[Сергей Сунцев]

в первом случае у вас ошибка в строке
weatherMethod={this.gettingWeather}
Вы обращаетесть к текущей функции, не связав её с ассинхронным методом gettingWeather

А про render вот дока

Comments

[n1ksON]

а как мне нужно было обратиться к методу?

[Сергей Сунцев]

Для ассинхронщины используйте usecallback

[Сергей Сунцев]

n1ksON, А обращаться лучше через каррирование

[n1ksON]

Сергей Сунцев, а в итоге-то как сейчас принято писать? Переделать чтобы работало через функцию или оставить класс?

[Сергей Сунцев]

Тенденция такая, что все переходят на хуки. Поэтому советую поразбираться и сделать так, что бы работало на функциях.
опять таки в документации есть хороший пример по работе с внешними ручками, только useEffect переделайте в usecallback

[n1ksON]

Сергей Сунцев, но в примере не используется useMemo. Вы про useEffect?

[Сергей Сунцев]

n1ksON, Да, прошу прощения описался