Как отлаживать приложение React?
В этом случае, поскольку ошибка произошла только один раз в производственной среде (развернутой на страницах Github), может показаться трудным найти источник.
Первый шаг - поиск ошибки в консоли:
Uncaught Error: Minified React error # 152; посетите https://reactjs.org/docs/error-decoder.html?invariant=152&args [] = Компонент для полного сообщения или используйте неминифицированную среду разработки для полных ошибок и дополнительных полезных предупреждений.
Полное сообщение об ошибке из ссылки составляет:
Компонент (...): ничего не было возвращено от рендеринга. Обычно это означает, что оператор возврата отсутствует. Или, чтобы ничего не отображать, верните null.
Следующий шаг - выяснить, как легко воспроизвести ошибку (и, надеюсь, локально).
С помощью Create-React-App , вы можете вручную создать производственную сборку с yarn build. Он скомпилирует окончательные файлы stati c в каталог ./build. Затем вы можете запустить любой простой HTTP-сервер на своем локальном компьютере. Лично я использую http-server, который я установил глобально, как инструмент быстрой отладки!
yarn build
http-server ./build
И вы должны увидеть то же самое, что и на страницах Github. , но по умолчанию с http://127.0.0.1:8080/.
Последний шаг - это поиск кода виновника. Возможно, есть лучшие способы сделать это, но вот способ, который всегда работает. Начните с самого минимального кода, поэтому закомментируйте весь свой собственный код.
const Root = () => (
<Provider store={store}>
{/* <TodoApp /> */}
</Provider>
);
Затем снова протестируйте сборку. Если работает, значит проблема в пределах <TodoApp />. Если это не сработает, это означает, что проблема возникла где-то еще (возможно, из-за конфигурации и т. Д. c).
Теперь в TodoApp продолжите этот процесс: прокомментируйте половину компонента, протестируйте сборку , rince и повторяйте, пока не сузите поиск до последнего места, где возникла проблема.
Это всего лишь простой двоичный поиск, применяемый в контексте отладки.
Что было не так в ваш код?
Тем не менее, я потратил время, чтобы протестировать репозиторий, и проблема связана с компонентом TodoForm .
return (
// <div className="todo-form">
// <input
// ref={inputRef}
// type="text"
// placeholder='Enter new todo'
// onChange={event => handleInputOnChange(event)}
// onKeyPress={event => handleInputOnKeyPress(event)}
// />
// </div>
<div className={classes.root} style={{marginTop: '10px', marginBottom: '10px'}}>
<form noValidate autoComplete="off">
<div>
Комментарии в начале этого JSX-блока, возможно, неправильно преобразованы в окончательной сборке, что означает, что у компонента отсутствует допустимое возвращаемое значение.
Исправление состоит только в удалении этих комментариев.