Новые ответы с меткой reactjs
1
голос
Принятый
Проблема с переходом между роутами (React)
Попробуйте мой написанный код
Ссылка - [https://codesandbox.io/s/stack-overflow-help-1-sqx548?file=/src/index.js]
0
голосов
Принятый
Почему запускается два раза componentDidMount?
Попробуйте удалить тег <StrictMode> или <React.StrictMode> из index.js.
1
голос
Принятый
Почему картинки на deploy не отображаются?
в gh-pages сборке пути строятся так:
<img src="/название репозитория/imgs/..." />
но лучше воспользоваться бандлером и импортировать изображения в компоненты, как писали в комментах, ...
1
голос
Организация задержки запроса при вводе данных в input
Всем спасибо за ответы. Я написал hook с использованием useRef. Получилось так:
function useDebounce(fn: any, timeoutMs: number): Function {
// в ссылках хранится id таймера и время предидущего ...
1
голос
Повторно вызывается метод при использовании useState React
Уже пробовал удалять события, и много разного.
Значит не так ты с событиями работал. Вот такой вариант работы с событиями предлагают сами разработчики Реакта. При создании компонента событие ...
1
голос
Принятый
Организация задержки запроса при вводе данных в input
Подскажите прав ли я по поводу использования window в проекте?
Думаю что по возможности этого нужно избегать.
Почему не идёт присвоение значений в переменные.
Присвоение "идет"... Но в ...
0
голосов
Как обратиться к элементу строки @mui/datagrid
Кажется разобрался. Достаточно было внести columns внутрь основной константы.
Обращения к элементам ячейки идут как params.row.<field_name>
-2
голоса
Как при помощи библиотеки yup в JavaScript (react) сделать кастомную валидацию? Например, поле инпута может включать буквы и некоторые спец. Символы
Для создания кастомной валидации с использованием библиотеки yup нужно использовать метод addMethod.
Пример:
import * as yup from "yup";
// Создаем схему валидации
const schema = yup.object(...
1
голос
React - пустой сайт на gh-pages
Измените вот здесь
import {BrowserRouter} from 'react-router-dom'
на
import {HashRouter} from 'react-router-dom'
и все будет работать. Развернутый ответ тут
import React from 'react';
import ...
1
голос
Принятый
Как достать данные из JSON React
Извиняюсь за форматирование, удобнее было отредактировать в редакторе.
И так, судя из вашего кода, в rates должен храниться объект, у которого ключом будет валюта (USD, UAH, EUR ...), а значение число ...
0
голосов
кто нибудь знает как подключить библиотеку яндекс карты в react?
npm install --force react-yandex-maps
0
голосов
Помогите вызвать в React {const}
я думаю надо использовать хук useEffect, в верхней части компонента добавте useEffect(()=>Change(),[])
2
голоса
Как достать данные из JSON React
скорее всего имя поля неправильно указано, проверьте что у вас в res приходит, возможно опечатка
0
голосов
Не полное возвращение данных с API в next js
Я работаю со strapi используя плагин graphql, фронт next.js
В плейграунде graphql, всегда можно оттестировать запросы и понять где ошибка на стороне фронта или бека.
Могу предположить:
Ошибка в ...
0
голосов
у меня проблема с запросом async/await with axios пишет что map is not a fn но когда использую 2 запрос то все ок в чем проблема 1 запроса?
По всей видимости что у строки string нету функции map? Надо удостоверится что axios получает нужный заголовок Content-Type: application/json иначе он возвращает в data обычную строку. Если повлиять ...
0
голосов
Принятый
Как передать переменную с html кодом в компонент React
Как я могу вытащить его и вставить в свой React компонент?
Например вот так...
const txt = `<h1>Заголовок<\/h1>
<ul>
<li>Первый<\/li>
<li>Второй<\/li>...
1
голос
хочу получить те элементы из первого массива которые и есть во втором массиве
Функциональное решение:
const array = [
{ id: 'UPLAND', name: 'Суходол' },
{ id: 'SWAMP12', name: 'Болото I, II' },
{ id: 'SWAMP3', name: 'Болото III' },
{ id: 'MMG', name: 'ММГ' },
{ id:...
1
голос
хочу получить те элементы из первого массива которые и есть во втором массиве
получить те элементы из первого массива которые и есть во втором
Можно использовать вот такой вариант решения...
const array = [
{ id: 'UPLAND', name: 'Суходол' },
{ id: 'SWAMP12', name: '...
1
голос
Проект на React App. Не могу достать value из react-компонента
В вашем случае:
document.getElementsByClassName('form-control').value
getElementsByClassName возвращает HTMLCollection, а collection как вы понимаете это не один элемент это скорее массив из ...
3
голоса
Принятый
Вывод компонента при нажатии на кнопку в боковом меню в React
Открываем первый премер роутера со стражем.
https://github.com/remix-run/react-router/blob/dev/examples/auth/src/App.tsx
<Routes>
<Route element={<Layout />}>
<Route path=&...
0
голосов
Почему происходит ошибка "The deploy step encountered an error: The process failed with exit code 128 ❌ Deployment failed"?
Спасибо за помощь wolk8506, помогло!
От себя добавлю что эти настройки находятся в общих настройках(Settings) целевого репозитория в разделе Actions->General.
0
голосов
В чем разница между передачей в setState объекта и функции и зачем вообще передавать функцию?
Передача функции в состояния дает возможность получить предыдущее значение состояния даже если оно еще не ререндерилось.
Пример:
class App extends Component {
state = {
counter: 0
}
...
0
голосов
При завершения Event (События), фон события не перерисовывается
Вот как должен выглядеть стиль для завершенных событий:
&.completed {
background-color: #18FFFF;
color: black;
}
А вот стиль для незавершенных событий:
.container {
display: flex;
...
0
голосов
Принятый
Динамические мета данные в react + nodejs приложении
Поднял express сервер на nodejs, проксирую все запросы через nginx на сервер, от сервера отдаю свою самописную верстку, где встраиваю в head билды react приложения
0
голосов
как мне добавить параметр disable=false в созданную кнопку маркера
для установки атрибута к элементу нужно применить метод setAttribute
document.getElementById("buttun2").setAttribute('disabled','true')
removeAttribute для удаления атрибута соответственно
0
голосов
Принятый
Почему появляется ошибка при первом запуске React?
Ошибка связана с отсутствием модуля @babel/plugin-proposal-private-property-in-object. Для ее исправления нужно установить пакет с этим модулем, выполнив команду:
npm install --save-dev @babel/plugin-...
0
голосов
Принятый
Как отрисовать N изображений React + Spring Boot
Для начала создадим метод, который будет отправлять нам список названий файлов:
@RequestMapping(value = "/getTrophies/{id}", method = RequestMethod.GET, produces = MediaType....
0
голосов
Бесплатный деплой сайта
Через DynDNS хостить со своего компа если нет выделенного IP. Я крайне сильно сомневаюсь, что такое захостят бесплатно.
0
голосов
typescript не показывает ошибок в пропсах
В компоненте Sidebar передавать пропсы в качестве параметра функции:
const Sidebar: React.FC<SidebarProps> = (props): JSX.Element => {
const { someNumber, someString } = props;
return (...
0
голосов
Принятый
Ошибка при сборке проекта. В типе "BrowserHistory" отсутствуют следующие свойства из типа "History": createURL, encodeLocationts(2739)
При вводе npm i устанавливалась более новая версия react-router-dom. Я установил ту которая изначально была в проекте и все заработало.
0
голосов
Запрос данных из фейк API с помощью fetchAll
Решение найдено. Проблема в экспорте.
Надо было написать так
export const fetchAll = () =>
new Promise((resolve) => {
window.setTimeout(function () {
resolve(users)
...
0
голосов
Styled-components изменить цвет по клику на li
Если честно не силён в JS, так что реализация так себе, но примерно вот так должно работать
const [isActive, setIsActive] = useState(false);
const selectLang = (e: React.MouseEvent<HTMLElement>)...
0
голосов
Принятый
Как правильно сгенерировать ts/js классы на основе proto-файла?
Оказывается, что библиотека grpc-web не поддерживает двунаправленную потоковую передачу
0
голосов
Принятый
Регистрация через модальное окно React + Spring
Как оказалось, совсем неважно - модальное окно или отдельная страница для регистрации
На стороне React необходимо вызвать POST запрос:
import axios from "axios";
const onRegistration = () ...
2
голоса
Принятый
рендеринг сообщений в чате
Проблема в неверном key. В данном случае для ключа выбран index в массиве.
При добавлении вручную - добавляется в конец массива и у каждого нового элемента новый индекс.
При добавлении по событию - ...
0
голосов
В чем отличие public и assets?
Папка public полезна в качестве обходного пути для ряда менее распространенных
случаев:
-Вам нужен файл с определенным именем в выходных данных сборки.
-У вас есть тысячи изображений, и вам нужно ...
1
голос
Принятый
В чем отличие public и assets?
public - папка в которой лежат публично доступные файлы разого назначения например index.html, hello.html и.т.д. как правило это и есть корень сайта /
assets - папка в которой лежат ассеты сайта (...
1
голос
Принятый
Почему метод возвращает [object Object]?
Два варианта решения проблемы. Все зависит от задачи.
в Main.js модифицировать методы increaseVote и checkWinner, которые в качестве аргумента будут принимать SyntheticEvent (этот аргумент возникает ...
0
голосов
Нужно сравнить значение ключа с массивом
Решил проблему добавлением стейта для хранения id
const [idArr, setIdArr] = useState([])
const idArrCopy = Object.assign([], idArr)
function getMessage () {
api
.getMessage()
.then(res => {
...
0
голосов
Почему метод возвращает [object Object]?
обработчик onlick первым параметром принимает объект события.
Соответственно здесь
<button onClick={checkWinner}
в метод checkWinner передается не id, а объект события о нажатии кнопки.
1
голос
Принятый
Комбинирование Get- и PostMapping в Spring Boot
По феншую, у вас должно быть два отдельных метода. Метод GET не предусматривает тела и для него @RequestBody вызывает то, что вызывает.
@GetMapping("")
public String[] getSomeone(){
//...
0
голосов
Как прописать путь к изображению в <img src={?}>?
В реакт импортировать нужно изображение
Import img "./path/img.png"
Потом этот img использовать в src
<img src={img}>
Это по вопросу как прописать путь к изображению
2
голоса
Как удалить ненужные библиотеки из рабочей сборки webpack v5
Я выяснил что при сборке проекта webpack не учитывает devDependencies и dependencies из файла package.json. Webpack анализирует импорты. В своем проекте я нашел
import {something} from "...
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('...
3
голоса
Принятый
Перезапустить видео на сайте при возврате к нему
Для выполнения задуманного был использован Intersection Observer.
Далее был добавлен useEffect, который навесит обработку на элемент с рефом.
А, после - дело техники)
const App = () => {
const ...
4
голоса
Принятый
Как сделать, чтобы функция выполнялась только при нажатии
Вот еще один пример.
const App = () => {
const [state, setState] = React.useState(false)
return <div>
<button onClick={() => setState(p => !p)}>
{state ? '...
3
голоса
Как сделать, чтобы функция выполнялась только при нажатии
Как сделать, чтобы функция выполнялась только при нажатии
Вот примерно такой принцип работы должен быть в Реакте на "нажатия" и на "показать/скрыть" элемент...
//
function App(...
0
голосов
Leaflet React карта отображается кусками
Нужно было карту растянуть на весь div -
<MapContainer center={x} zoom={20} style={{width: '100%', height: '100%'}}>
<TileLayer
attribution='© <a href="http://...
1
голос
Белый экран при билде React + react-router-dom
Мужик там же после билда написано, что писать(если через консоль это делать)
я прописал у себя все работает
npm install -g serve
serve -s build
50 лучших ответов включены
Связанные метки
reactjs × 6464javascript × 3312
redux × 608
typescript × 439
node.js × 338
css × 324
html × 298
react-router × 272
react-hook × 244
react-native × 225
react-router-dom × 166
webpack × 150
axios × 146
jsx × 133
create-react-app × 115
json × 108
frontend × 106
nextjs × 100
express × 96
state × 92
массивы × 84
компоненты × 75
fetch × 74
material-ui × 72
php × 69