Почему переменная undefined?

Question

[Denis Minimal]

React компонент. Его код очень упрощен. При вызове функции save в консоль выводит undefined. Как такое вообще возможно?

import React, { useEffect } from "react";
import axios from "axios";

const Editor = () => {
  let html;

  useEffect(() => {
    open("index.html");
  }, []);

  const open = page => {
    axios
      .get(`../${page}`)
      .then(resp => resp.data)
      .then(data => {
				html = data;
      });
  };

  const save = () => {
		console.log(html);
  };

  return (
    <>
      <button onClick={save}>
        Сохранить
      </button>
    </>
  );
};

export default Editor;

Answer 1

[Владимир]

В этом случае нужно почитать еще про useState кроме useEffect

Comments

[Denis Minimal]

Использовал и useState, для хранения этих данных, но потом эта переменная становится недоступна в другой функции. В общем получается замкнутый круг.
Может мне скинуть весь код компонента для наглядности?

[Владимир]

Изолируй проблему в песочнице на https://codesandbox.io/ и скинь ссылку, и используй стейт для начала

[Denis Minimal]

Владимир, Взгляните пожалуйста Песочница

В этом компоненте переменная, которая неправильно работает называется virtualDOM. В ней хранится копия DOM загружаемой страницы. Хранить переменную в state очень неудобно, т.к. я провожу различные манипуляции с этим DOM.
Кое где закомментировал, где у меня возникают вопросы. Разработку веду с помощью gulp, a не create-react-app, т.к. в разработке участвует php

[Владимир]

[Denis Minimal]

Владимир, Ошибку устранил. Все работает, а переменная по прежнему undefined

[Владимир]

Ну так ты ничего не поменял, в начале функции объявляешь переменную, в useEffect ее устанавливаешь, в хендлере читаешь. Не будет так работать, удобно тебе или нет, если ты в еффекте при помощи fetch читаешь данные, единственный выход до них добраться - использовать стейт. Читай доку по реакт.

начни с этого https://ru.react.js.org/docs/thinking-in-react.html

[Denis Minimal]

Владимир, Спасибо. Буду пробовать

Answer 2

[bini1988]

Отличная статья по теме useEffect. Если коротко, то вы на каждый рендер создаете новую функцию save и новую переменную html, при этом в момент выполнения функции open вы скорей всего захватите по замыканю переменную html из области видимости которая уже устареет на момент выполнения вновь созданной функции save по клику на кнопке. Для сохранения любого значения между рендерами без тригера ререндера компонента можно использовать useRef.

Answer 3

[Alex]

Скорее всего save вызывается до того, как закончится выполнение open. Вот переменная и пустая

Comments

[Denis Minimal]

По логике вещей - да, но если в open там где html присваивается data вставить console.log() который укажет на то, что функция open выполнена и только потом сделать клик, в консоль выведется undefined.

[Владимир]

Денис Середа, Почитай про жизненный цикл компонентов в Реакт. Состояние не хранят в переменных, для этого есть стейт.

[Aleksandr Ataakgayev]

И да, элементы компоненты отрабатывают быстрее чем происходит запрос на сервис. Сначала нужно обработать запрос на сервер (componentWillMount()). Не помню какой метод используется для FC