У меня (по крайней мере, для меня) странная проблема с моей текущей настройкой проекта, ориентированного на реакцию (на самом деле это Po C, но в планах использовать эту структуру в будущем).
My структура (выдержка):
.
├── BaseApp
├── foobar
└── foobar2
Внутри моего приложения я добавил локальные модули через yarn add ../foobar
и yarn add ../foobar2
(планируется использовать yarn-workspaces или callstack / haul в будущей настройке проекта). Оба модуля предоставляют собственный модуль реакции с простой собственной частью.
Я импортирую модули внутри своего приложения:
import Foobar from 'foobar';
import Foobar2 from 'foobar2';
И использую их в компоненте:
const [status, setStatus] = useState('Init ...');
const [message, setMessage] = useState('---');
const [multiply, setMultiply] = useState(0);
useEffect(() => {
Foobar2.sampleMethod('Testing', 123, (message: string) => {
setStatus('Received...');
setMessage(message);
});
Foobar.multiply(3, 7).then(setMultiply);
}, []);
// ...
<Text style={styles.sectionDescription}>Status: {status}</Text>
<Text style={styles.sectionDescription}>Message: {message}</Text>
<Text style={styles.sectionDescription}>Result: {multiply}</Text>
Первоначально приложение загружается и остается белым / пустым. Нет ошибки. Никаких намеков на то, что, вероятно, идет не так. Когда я удаляю импорт и перезагружаю ( ⌘ + r или набираю r
в консоли) приложение перезагружается и показывает ошибку о (действительно) отсутствующих переменных:
If I add the imports again, the app reloads via hot reload (HMR) and voila, it works ...
Работает после HMR
Почему? Я не могу себе объяснить, почему это происходит. Может быть, кто-нибудь поможет мне разобраться в том, что может помочь мне исправить это «странное» поведение?