Новые ответы с меткой

1 голос
Принятый

Проблема с переходом между роутами (React)

Попробуйте мой написанный код Ссылка - [https://codesandbox.io/s/stack-overflow-help-1-sqx548?file=/src/index.js]
Pîrnău Artemie's user avatar
0 голосов
Принятый

Почему запускается два раза componentDidMount?

Попробуйте удалить тег <StrictMode> или <React.StrictMode> из index.js.
Pîrnău Artemie's user avatar
1 голос
Принятый

Почему картинки на deploy не отображаются?

в gh-pages сборке пути строятся так: <img src="/название репозитория/imgs/..." /> но лучше воспользоваться бандлером и импортировать изображения в компоненты, как писали в комментах, ...
kvadratikk's user avatar
1 голос

Организация задержки запроса при вводе данных в input

Всем спасибо за ответы. Я написал hook с использованием useRef. Получилось так: function useDebounce(fn: any, timeoutMs: number): Function { // в ссылках хранится id таймера и время предидущего ...
Dmitriy Prigulnov's user avatar
1 голос

Повторно вызывается метод при использовании useState React

Уже пробовал удалять события, и много разного. Значит не так ты с событиями работал. Вот такой вариант работы с событиями предлагают сами разработчики Реакта. При создании компонента событие ...
ksa's user avatar
  • 4,769
1 голос
Принятый

Организация задержки запроса при вводе данных в input

Подскажите прав ли я по поводу использования window в проекте? Думаю что по возможности этого нужно избегать. Почему не идёт присвоение значений в переменные. Присвоение "идет"... Но в ...
ksa's user avatar
  • 4,769
0 голосов

Как обратиться к элементу строки @mui/datagrid

Кажется разобрался. Достаточно было внести columns внутрь основной константы. Обращения к элементам ячейки идут как params.row.<field_name>
ar rr's user avatar
  • 119
-2 голоса

Как при помощи библиотеки yup в JavaScript (react) сделать кастомную валидацию? Например, поле инпута может включать буквы и некоторые спец. Символы

Для создания кастомной валидации с использованием библиотеки yup нужно использовать метод addMethod. Пример: import * as yup from "yup"; // Создаем схему валидации const schema = yup.object(...
DezZzy's user avatar
  • 20
1 голос

React - пустой сайт на gh-pages

Измените вот здесь import {BrowserRouter} from 'react-router-dom' на import {HashRouter} from 'react-router-dom' и все будет работать. Развернутый ответ тут import React from 'react'; import ...
Randall's user avatar
  • 6,505
1 голос
Принятый

Как достать данные из JSON React

Извиняюсь за форматирование, удобнее было отредактировать в редакторе. И так, судя из вашего кода, в rates должен храниться объект, у которого ключом будет валюта (USD, UAH, EUR ...), а значение число ...
Oliver Patterson's user avatar
0 голосов

кто нибудь знает как подключить библиотеку яндекс карты в react?

npm install --force react-yandex-maps
Станислав's user avatar
0 голосов

Помогите вызвать в React {const}

я думаю надо использовать хук useEffect, в верхней части компонента добавте useEffect(()=>Change(),[])
Евгений Ваулин's user avatar
2 голоса

Как достать данные из JSON React

скорее всего имя поля неправильно указано, проверьте что у вас в res приходит, возможно опечатка
Евгений Ваулин's user avatar
0 голосов

Не полное возвращение данных с API в next js

Я работаю со strapi используя плагин graphql, фронт next.js В плейграунде graphql, всегда можно оттестировать запросы и понять где ошибка на стороне фронта или бека. Могу предположить: Ошибка в ...
Виктория Абдуханова's user avatar
0 голосов

у меня проблема с запросом async/await with axios пишет что map is not a fn но когда использую 2 запрос то все ок в чем проблема 1 запроса?

По всей видимости что у строки string нету функции map? Надо удостоверится что axios получает нужный заголовок Content-Type: application/json иначе он возвращает в data обычную строку. Если повлиять ...
Eugene X's user avatar
  • 2,957
0 голосов
Принятый

Как передать переменную с html кодом в компонент React

Как я могу вытащить его и вставить в свой React компонент? Например вот так... const txt = `<h1>Заголовок<\/h1> <ul> <li>Первый<\/li> <li>Второй<\/li>...
ksa's user avatar
  • 4,769
1 голос

хочу получить те элементы из первого массива которые и есть во втором массиве

Функциональное решение: const array = [ { id: 'UPLAND', name: 'Суходол' }, { id: 'SWAMP12', name: 'Болото I, II' }, { id: 'SWAMP3', name: 'Болото III' }, { id: 'MMG', name: 'ММГ' }, { id:...
anton's user avatar
  • 439
1 голос

хочу получить те элементы из первого массива которые и есть во втором массиве

получить те элементы из первого массива которые и есть во втором Можно использовать вот такой вариант решения... const array = [ { id: 'UPLAND', name: 'Суходол' }, { id: 'SWAMP12', name: '...
ksa's user avatar
  • 4,769
1 голос

Проект на React App. Не могу достать value из react-компонента

В вашем случае: document.getElementsByClassName('form-control').value getElementsByClassName возвращает HTMLCollection, а collection как вы понимаете это не один элемент это скорее массив из ...
Eugene X's user avatar
  • 2,957
3 голоса
Принятый

Вывод компонента при нажатии на кнопку в боковом меню в React

Открываем первый премер роутера со стражем. https://github.com/remix-run/react-router/blob/dev/examples/auth/src/App.tsx <Routes> <Route element={<Layout />}> <Route path=&...
Eugene X's user avatar
  • 2,957
0 голосов

Почему происходит ошибка "The deploy step encountered an error: The process failed with exit code 128 ❌ Deployment failed"?

Спасибо за помощь wolk8506, помогло! От себя добавлю что эти настройки находятся в общих настройках(Settings) целевого репозитория в разделе Actions->General.
catfish's user avatar
0 голосов

В чем разница между передачей в setState объекта и функции и зачем вообще передавать функцию?

Передача функции в состояния дает возможность получить предыдущее значение состояния даже если оно еще не ререндерилось. Пример: class App extends Component { state = { counter: 0 } ...
Randall's user avatar
  • 6,505
0 голосов

При завершения Event (События), фон события не перерисовывается

Вот как должен выглядеть стиль для завершенных событий: &.completed { background-color: #18FFFF; color: black; } А вот стиль для незавершенных событий: .container { display: flex; ...
Килобайт's user avatar
0 голосов
Принятый

Динамические мета данные в react + nodejs приложении

Поднял express сервер на nodejs, проксирую все запросы через nginx на сервер, от сервера отдаю свою самописную верстку, где встраиваю в head билды react приложения
ОАЗИС 07's user avatar
0 голосов

как мне добавить параметр disable=false в созданную кнопку маркера

для установки атрибута к элементу нужно применить метод setAttribute document.getElementById("buttun2").setAttribute('disabled','true') removeAttribute для удаления атрибута соответственно
Евгений Ваулин's user avatar
0 голосов
Принятый

Почему появляется ошибка при первом запуске React?

Ошибка связана с отсутствием модуля @babel/plugin-proposal-private-property-in-object. Для ее исправления нужно установить пакет с этим модулем, выполнив команду: npm install --save-dev @babel/plugin-...
Килобайт's user avatar
0 голосов
Принятый

Как отрисовать N изображений React + Spring Boot

Для начала создадим метод, который будет отправлять нам список названий файлов: @RequestMapping(value = "/getTrophies/{id}", method = RequestMethod.GET, produces = MediaType....
Tamada's user avatar
  • 191
0 голосов

Бесплатный деплой сайта

Через DynDNS хостить со своего компа если нет выделенного IP. Я крайне сильно сомневаюсь, что такое захостят бесплатно.
Yallz's user avatar
  • 149
0 голосов

typescript не показывает ошибок в пропсах

В компоненте Sidebar передавать пропсы в качестве параметра функции: const Sidebar: React.FC<SidebarProps> = (props): JSX.Element => { const { someNumber, someString } = props; return (...
Zerosar's user avatar
  • 11
0 голосов
Принятый

Ошибка при сборке проекта. В типе "BrowserHistory" отсутствуют следующие свойства из типа "History": createURL, encodeLocationts(2739)

При вводе npm i устанавливалась более новая версия react-router-dom. Я установил ту которая изначально была в проекте и все заработало.
Михаил's user avatar
0 голосов

Запрос данных из фейк API с помощью fetchAll

Решение найдено. Проблема в экспорте. Надо было написать так export const fetchAll = () => new Promise((resolve) => { window.setTimeout(function () { resolve(users) ...
user20389696's user avatar
0 голосов

Styled-components изменить цвет по клику на li

Если честно не силён в JS, так что реализация так себе, но примерно вот так должно работать const [isActive, setIsActive] = useState(false); const selectLang = (e: React.MouseEvent<HTMLElement>)...
Yallz's user avatar
  • 149
0 голосов
Принятый

Как правильно сгенерировать ts/js классы на основе proto-файла?

Оказывается, что библиотека grpc-web не поддерживает двунаправленную потоковую передачу
ByMyKolaps's user avatar
0 голосов
Принятый

Регистрация через модальное окно React + Spring

Как оказалось, совсем неважно - модальное окно или отдельная страница для регистрации На стороне React необходимо вызвать POST запрос: import axios from "axios"; const onRegistration = () ...
Tamada's user avatar
  • 191
2 голоса
Принятый

рендеринг сообщений в чате

Проблема в неверном key. В данном случае для ключа выбран index в массиве. При добавлении вручную - добавляется в конец массива и у каждого нового элемента новый индекс. При добавлении по событию - ...
Grundy's user avatar
  • 80k
0 голосов

В чем отличие public и assets?

Папка public полезна в качестве обходного пути для ряда менее распространенных случаев: -Вам нужен файл с определенным именем в выходных данных сборки. -У вас есть тысячи изображений, и вам нужно ...
Yuki's user avatar
  • 141
1 голос
Принятый

В чем отличие public и assets?

public - папка в которой лежат публично доступные файлы разого назначения например index.html, hello.html и.т.д. как правило это и есть корень сайта / assets - папка в которой лежат ассеты сайта (...
Eugene X's user avatar
  • 2,957
1 голос
Принятый

Почему метод возвращает [object Object]?

Два варианта решения проблемы. Все зависит от задачи. в Main.js модифицировать методы increaseVote и checkWinner, которые в качестве аргумента будут принимать SyntheticEvent (этот аргумент возникает ...
Денис Лагуткин's user avatar
0 голосов

Нужно сравнить значение ключа с массивом

Решил проблему добавлением стейта для хранения id const [idArr, setIdArr] = useState([]) const idArrCopy = Object.assign([], idArr) function getMessage () { api .getMessage() .then(res => { ...
agentx's user avatar
  • 35
0 голосов

Почему метод возвращает [object Object]?

обработчик onlick первым параметром принимает объект события. Соответственно здесь <button onClick={checkWinner} в метод checkWinner передается не id, а объект события о нажатии кнопки.
Grundy's user avatar
  • 80k
1 голос
Принятый

Комбинирование Get- и PostMapping в Spring Boot

По феншую, у вас должно быть два отдельных метода. Метод GET не предусматривает тела и для него @RequestBody вызывает то, что вызывает. @GetMapping("") public String[] getSomeone(){ //...
Sergey Mitrofanov's user avatar
0 голосов

Как прописать путь к изображению в <img src={?}>?

В реакт импортировать нужно изображение Import img "./path/img.png" Потом этот img использовать в src <img src={img}> Это по вопросу как прописать путь к изображению
Maneken's user avatar
  • 579
2 голоса

Как удалить ненужные библиотеки из рабочей сборки webpack v5

Я выяснил что при сборке проекта webpack не учитывает devDependencies и dependencies из файла package.json. Webpack анализирует импорты. В своем проекте я нашел import {something} from "...
Dmitriy Prigulnov's user avatar
0 голосов

fsyms is a required param

Реализовал это таким способом: const API_URL_SEARCH = 'https://min-api.cryptocompare.com/data/pricemultifull'; const fetchData = () => { const params = new URLSearchParams(); params.append('...
iewher's user avatar
  • 7
3 голоса
Принятый

Перезапустить видео на сайте при возврате к нему

Для выполнения задуманного был использован Intersection Observer. Далее был добавлен useEffect, который навесит обработку на элемент с рефом. А, после - дело техники) const App = () => { const ...
SaNFeeD's user avatar
  • 618
4 голоса
Принятый

Как сделать, чтобы функция выполнялась только при нажатии

Вот еще один пример. const App = () => { const [state, setState] = React.useState(false) return <div> <button onClick={() => setState(p => !p)}> {state ? '...
SaNFeeD's user avatar
  • 618
3 голоса

Как сделать, чтобы функция выполнялась только при нажатии

Как сделать, чтобы функция выполнялась только при нажатии Вот примерно такой принцип работы должен быть в Реакте на "нажатия" и на "показать/скрыть" элемент... // function App(...
ksa's user avatar
  • 4,769
0 голосов

Leaflet React карта отображается кусками

Нужно было карту растянуть на весь div - <MapContainer center={x} zoom={20} style={{width: '100%', height: '100%'}}> <TileLayer attribution='&copy; <a href="http://...
Михаил's user avatar
1 голос

Белый экран при билде React + react-router-dom

Мужик там же после билда написано, что писать(если через консоль это делать) я прописал у себя все работает npm install -g serve serve -s build
Maneken's user avatar
  • 579

50 лучших ответов включены