Как вывести данные из fetch?

Question

[arctic07]

function App() {
  fetch('https://jsonplaceholder.typicode.com/posts/')
    .then((response) => response.json())
    .then((data) => setData(data));

  let array = [];

  const setData = (data) => {
    array.push(data);
  };

  console.log(array);

  const titles = array.map((item) => <li>{item.title}</li>);

  return (
    <div className='App'>
      <header className='App-header'>111</header>
      <ul>{titles}</ul>
    </div>
  );
}

export default App;

Вроде как запись в массив array происходит. Но если вывести в консоли array[0] - выводит undefined.


Как сделать вывод?
смысл как это написать в ванильном JS как вывести данные из фетча.

пс вопрос на деле не про реакт...

Comments

[Иван]

ну как минимум потому, что ты выполняешь асинхрон, но компонент не ждёт, пока получит данные. Он выводит сразу же, а выводить нечего и получаешь undefined

[Иван]

как вариант, с хуками, создаешь стейт, как инфа загрузится, грузишь её в стейт и в return пишешь условие: если стейт не пустой, отобразить данные иначе null

ps смысол реакта без хуков и стейта?)))
pss порно без рук смотришь?))))
psss а ещё функцию setData вверх функции перекинь, чтобы твой фетч потом шёл.

[arctic07]

Иван, ps смысол реакта без хуков и стейта?)))
ну типо смысл как это написать в ванильном JS как вывести данные из фетча.

[Иван]

arctic07, дак ты зачем тогда реакт приложение создаешь? создай script.js и работай с ним. чтобы познать eventloop не нужен реакт.

[arctic07]

Иван, ну вот, и как данные то вывести? вы можете помочь ответить на этот вопрос?
кодом написать, а не советовать пол JSа выучить.

[Иван]

arctic07, дак я же сказал, что тебе нужен хук, чтобы получить данные. у тебя undefined потому что реакт не собирается ждать, пока ты там свои 100 объектов получишь, он сразу выводит. тебе надо объяснить реакту, что если меняется стейт (который ты делать не хочешь), то тогда надо бы перерисовать компонент.
зы я просто на опережение работаю, я понял уже что знаний в понимании асинхронного кода мало и сразу поэтому говорю, отложи это и изучи те пункты, что я написал тебе, там инфы на день изучения и день практики)

[arctic07]

Иван, да с хуками я умею , мне нужно на JS , я просто не правильно вопрос поставил. В реакте же тоже можно писать ванильный JS и он не станет ректом от этого.

[Иван]

arctic07, ёёёёёёёёёёёёёёёёёёёёёёёёёёёёёёёёёёёёёёёёёё таааааа.
извини, но тут оказывается пробелы не только в eventloop. ладно, я пошёл, почитай про то, что написал. Бай

[arctic07]

Иван, =) лан почитаю, уже нашел статью.

Answer 1

[yarnstart]

Почитайте про промисы, console.log(array); выполнится раньше, чем вы запишите что-то в массив.
Если вы хотите писать асинхронный код синхронно (как сейчас у вас), вам нужно использовать async\await

Comments

[arctic07]

Можете пожалуйста написать пример. Я пытался написать async\await но видимо не правильно пишу..
Я читал про промисы и там в большинстве примеров результат .then - console.log , а мне нужно вывести данные. Как это сделать?

[Иван]

arctic07, советую изучить понятия как микро и макро таски, event loop, а потом уже promise, promiseAll, а потом уже async/await и только потом изучать реакт)

[arctic07]

Иван, а вы не можете на вопрос ответить, какой смысл советовать все изучить. Мне нужен ответ на обычный вопрос.

[Иван]

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

[arctic07]

Иван, я эту проблему ещё до задавания вопроса нагуглил , но все равно не понимаю КАК сделать это

[Евгений]

arctic07, твоя проблема в том что асинхронный код попадет в микротаск только после выполнения, и тогда только верется в поток, причем поток его ждать не будет и продолжит выполнение кода, в общем решай эту проблему

[yarnstart]

arctic07, https://ru.reactjs.org/docs/faq-ajax.html второй пример кода с функциональным компонентом, там то, что вам нужно

[yarnstart]

arctic07, Если вы хотите выполнить какой-то код после запрос (пуш в массив), вам нужно написать так

fetch('https://jsonplaceholder.typicode.com/posts/')
    .then((response) => response.json())
    .then((data) => setData(data))
    .then((data) => console.log(data)); // или любое другое действие

В вашем случае не совсем (консоль лог выведет undefined, т.к. сетДата вернет undefined), потому что сетДата мутирует внешнюю переменную.
Почитайте еще о "чистых функциях" и ФП

Answer 2

[Артур Т]

const app = async () => {
  const obj = await fetch('https://jsonplaceholder.typicode.com/posts/');
  const result = await obj.json();
  console.log(result[0])
}

app()

Comments

[arctic07]

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

[Артур Т]

В вопросе ты спрашивал как вывести в консоль - вот так.
В данном случае result это и есть массив, дальше делаешь с ним что тебе нужно(мапишь в li, оборачиваешь в дивы, вставляешь в DOM) но ВНУТРИ асинхронной функции, а не снаружи.