Size: a a a

React — русскоговорящее сообщество

2021 March 19

MK

Maxim Koylo in React — русскоговорящее сообщество
Kос
Ну это собственно весь код и есть.  Существуют карточки тарифов, по умолчанию выбран первый, при клике на карточку срабатывает хендлер, который скидывает всем карточкам значения на false и нужной (по которой кликнули) ставит true
скинь всю структуру стейта
источник

MK

Maxim Koylo in React — русскоговорящее сообщество
я уже просил но был проигнорирован
источник

K

Kос in React — русскоговорящее сообщество
Maxim Koylo
скинь всю структуру стейта
{
  "plans":{
     "monthly":[
        {
           "price":8,
           "isSelected":true,
           "name":"Basic",
           "text":"Cras sed sodales dolor, et dis purus. Libero tempus feugiat ut duis ultrices."
        },
        {
           "price":20,
           "isSelected":false,
           "name":"Regular",
           "text":"Sodales dolor, et dis purus. Libero tempus feugiat ut duis ultrices."
        },
        {
           "price":50,
           "isSelected":false,
           "name":"Pro",
           "text":"Et dis purus. Libero tempus feugiat ut duis ultrices."
        }
     ],
     "annual":[
        {
           "price":7,
           "isSelected":true,
           "name":"Basic",
           "text":"Cras sed sodales dolor, et dis purus. Libero tempus feugiat ut duis ultrices."
        },
        {
           "price":19,
           "isSelected":false,
           "name":"Regular",
           "text":"Sodales dolor, et dis purus. Libero tempus feugiat ut duis ultrices."
        },
        {
           "price":45,
           "isSelected":false,
           "name":"Pro",
           "text":"Et dis purus. Libero tempus feugiat ut duis ultrices."
        }
     ]
  }
}
источник

D

Dmitry in React — русскоговорящее сообщество
Kос
{
  "plans":{
     "monthly":[
        {
           "price":8,
           "isSelected":true,
           "name":"Basic",
           "text":"Cras sed sodales dolor, et dis purus. Libero tempus feugiat ut duis ultrices."
        },
        {
           "price":20,
           "isSelected":false,
           "name":"Regular",
           "text":"Sodales dolor, et dis purus. Libero tempus feugiat ut duis ultrices."
        },
        {
           "price":50,
           "isSelected":false,
           "name":"Pro",
           "text":"Et dis purus. Libero tempus feugiat ut duis ultrices."
        }
     ],
     "annual":[
        {
           "price":7,
           "isSelected":true,
           "name":"Basic",
           "text":"Cras sed sodales dolor, et dis purus. Libero tempus feugiat ut duis ultrices."
        },
        {
           "price":19,
           "isSelected":false,
           "name":"Regular",
           "text":"Sodales dolor, et dis purus. Libero tempus feugiat ut duis ultrices."
        },
        {
           "price":45,
           "isSelected":false,
           "name":"Pro",
           "text":"Et dis purus. Libero tempus feugiat ut duis ultrices."
        }
     ]
  }
}
Это данные с сервера ? Ты им проставил селектед поле ?
источник

MK

Maxim Koylo in React — русскоговорящее сообщество
Kос
{
  "plans":{
     "monthly":[
        {
           "price":8,
           "isSelected":true,
           "name":"Basic",
           "text":"Cras sed sodales dolor, et dis purus. Libero tempus feugiat ut duis ultrices."
        },
        {
           "price":20,
           "isSelected":false,
           "name":"Regular",
           "text":"Sodales dolor, et dis purus. Libero tempus feugiat ut duis ultrices."
        },
        {
           "price":50,
           "isSelected":false,
           "name":"Pro",
           "text":"Et dis purus. Libero tempus feugiat ut duis ultrices."
        }
     ],
     "annual":[
        {
           "price":7,
           "isSelected":true,
           "name":"Basic",
           "text":"Cras sed sodales dolor, et dis purus. Libero tempus feugiat ut duis ultrices."
        },
        {
           "price":19,
           "isSelected":false,
           "name":"Regular",
           "text":"Sodales dolor, et dis purus. Libero tempus feugiat ut duis ultrices."
        },
        {
           "price":45,
           "isSelected":false,
           "name":"Pro",
           "text":"Et dis purus. Libero tempus feugiat ut duis ultrices."
        }
     ]
  }
}
setState({
 plans: {
   monthly: state.plans.monthly.map((month) => ({
     ...month,
     isSelected: true,
   })),
 },
});
источник

K

Kос in React — русскоговорящее сообщество
Dmitry
Это данные с сервера ? Ты им проставил селектед поле ?
пока из файла, будут с сервера
источник

MK

Maxim Koylo in React — русскоговорящее сообщество
Maxim Koylo
setState({
 plans: {
   monthly: state.plans.monthly.map((month) => ({
     ...month,
     isSelected: true,
   })),
 },
});
а ты уже изменил условия что там тогл
источник

MK

Maxim Koylo in React — русскоговорящее сообщество
щас поправлю
источник

D

Dmitry in React — русскоговорящее сообщество
Kос
пока из файла, будут с сервера
Ну типа структура говенная
Поменяй как-то
Типа селктед это свойство
Тогда за раз и будешь менять его
В нем ид из данных
источник

K

Kос in React — русскоговорящее сообщество
теперь интереснее понять, почему мой неправильный код, работает 😄
источник

MK

Maxim Koylo in React — русскоговорящее сообщество
Kос
теперь интереснее понять, почему мой неправильный код, работает 😄
setState({
 ...state,
 plans: {
   ...state.plans,
   monthly: state.plans.monthly.map((month) => {
     return {
       ...month,
       isSelected: month.price === price,
     };
   }),
 },
});
источник

K

Kос in React — русскоговорящее сообщество
Спасибо за помощь, завтра уже попробую
источник

M

Mark in React — русскоговорящее сообщество
Делаю асихнронный диспатч на сервер, и он возвращает мне айдишник, затем этот айдишник нужно запушить в url строку, как лучше это реализовать?

Я просто передал объект history = useHistory() в качестве параметра экшену, и после получения айдишника, происходит пуш, это хороший вариант?
источник

S

SkyWalker in React — русскоговорящее сообщество
Ребята, добрый вечер!

Подскажите, пожалуйста, кто использовал либу react hook form. Как можно сделать так, чтобы изменения одного поля формы вызывало перерендер компонента, в котором инициализировано форма (я понимаю, что можно создать параллельно стейт, в котором можно хранить такие же данные, как и в форме, но я бы хотел избежать дублирования такой информации)?
источник

ТК

Тимур Кандарели... in React — русскоговорящее сообщество
подскажите пожалуйста вопрос по next js. как мне организовать струтура папок чтобы у меня был такой путь --> http://localhost:3000/important/id
на главное странице мне приходит массив объектов где есть поле категория, id и тп, кликая на какую либо новость у меня открывается новость по такому пути --> http://localhost:3000/<название категории>/<id этой новости>. как делать так чтобы если я ввожу в адресную строку только ttp://localhost:3000/<название категории> мне выдавались все новости именно этой категории
источник

ЕБ

Евгений Баранников... in React — русскоговорящее сообщество
Material UI - как сделать чтобы transition заработал? так как на картинке показано, не работает
источник

е

его имя роберт полсо... in React — русскоговорящее сообщество
Евгений Баранников
Material UI - как сделать чтобы transition заработал? так как на картинке показано, не работает
Свойство translate называется, transition это вообще плавность
источник

ВБ

Владислав Баурин... in React — русскоговорящее сообщество
SkyWalker
Ребята, добрый вечер!

Подскажите, пожалуйста, кто использовал либу react hook form. Как можно сделать так, чтобы изменения одного поля формы вызывало перерендер компонента, в котором инициализировано форма (я понимаю, что можно создать параллельно стейт, в котором можно хранить такие же данные, как и в форме, но я бы хотел избежать дублирования такой информации)?
А зачем тебе всё перерендерить?
источник

ЕБ

Евгений Баранников... in React — русскоговорящее сообщество
его имя роберт полсон
Свойство translate называется, transition это вообще плавность
точно, спасибо, чюр меня)
источник

ВБ

Владислав Баурин... in React — русскоговорящее сообщество
SkyWalker
Ребята, добрый вечер!

Подскажите, пожалуйста, кто использовал либу react hook form. Как можно сделать так, чтобы изменения одного поля формы вызывало перерендер компонента, в котором инициализировано форма (я понимаю, что можно создать параллельно стейт, в котором можно хранить такие же данные, как и в форме, но я бы хотел избежать дублирования такой информации)?
Вообще, по хорошему либо храни стейт выше по родителю, а useState прокидывай кулбеком в дочки, либо контекст, либо стейтменеджмент.  Можно замутить через рефы, но я хз что за задача у тебя точно.
источник