Есть кто работал c react-stripe-elements ? https://github.com/stripe/react-stripe-elements

Ребята линтер ругается. Line 9: Unexpected block statement surrounding arrow body arrow-body-style Как избавиться export default function getNews() { return new Promise((resolve, reject) => { fetch('/sport', { method: 'GET', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' } }).then((res) => { return res.json(res); }).then((json) => { console.log(json); resolve(json); }).catch((err) => { reject(err); }); }); }

Ребята линтер ругается. Line 9: Unexpected block statement surrounding arrow body arrow-body-style Как избавиться export default function getNews() { return new Promise((resolve, reject) => { fetch('/sport', { method: 'GET', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' } }).then((res) => { return res.json(res); }).then((json) => { console.log(json); resolve(json); }).catch((err) => { reject(err); }); }); }

ну так правильно

export const getNews = () => new Promise()

Всем привет,

Почему somefunc.bind(this) плохая практика?

Я так делаю, вроде не умер

Почему somefunc.bind(this) плохая практика?

кто сказал?

Почему somefunc.bind(this) плохая практика?

потому что есть стрелки

кто сказал?

Фидбек после тестового

Лол

Какой самый нормальный способ иньекции стилей из scss? style-loader почему-то пихает в сборку js-кода на 8 кб. (минифицированного кода) Ручная иньекция в код модуля это немного стремно Остается только portal прокидывать? Но тогда он будет анмаунтится при смене страницы, а желательно чтобы стили оставались в хедере

Почему somefunc.bind(this) плохая практика?

Потому что создаёшь отдельную функцию для каждого инстанса, наверное

Это нормальная практика

Иди им и скажи, что в чате написали, что это нормально.

Потому что создаёшь отдельную функцию для каждого инстанса, наверное

Если ты один раз в конструкторе делаешь - это ок

А вот в рендере стрелки да, там они каждый раз создаются

А вот в рендере стрелки да, там они каждый раз создаются

их не обязательно в рендере создавать

кто сказал?

https://codesandbox.io/s/lywnjx1vqm

В комментариях фидбек

Есть плагин https://github.com/chenglou/react-treeview/blob/master/src/react-treeview.jsx , который представляет собой типичный рекурсивный TreeView элемент. Пояснение чтобы вникнуть: состоянием можно управлять через два пропа: - defaultCollapsed - флаг при маунтинге элемента - collapsed - флаг, который заменяет внутренний стейт элемента В доках эти способы названы, "controlled" и "uncontrolled". В чём собственно проблема: понадобилось добавить фильтрацию по этому дереву. Поэтому добавляется логика: при нахождении элемента нужно развернуть всех его родителей, но тогда при сбросе фильтра вся эта срань останется развёрнутой. Придумал решение: componentWillReceiveProps(nextProps) { const { forcedCollapsed } = this.props const nextForcedCollapsed = nextProps.forcedCollapsed if (forcedCollapsed === undefined && nextForcedCollapsed !== undefined) { this.setState({ collapsed: this.forcedCollapsed, collapsedBeforeForced: this.state.collapsed, }) else if (forcedCollapsed !== undefined && nextForcedCollapsed === undefined) { this.setState({ collapsed: this.state.collapsedBeforeForced, }) } } Является ли это потерей чистоты компонента, ведь наше состояние переопределяется на основе предыдущего? Говнокод чи не?

их не обязательно в рендере создавать

А где я сказал, что их надо в рендера создавать?

ПС более элегантные способы приветствуются

Что то какая-то хуйня в твоём коде

В комментариях фидбек

тут говориться что делать bind в рендере это плохо, а не делать bind вобще

тут говориться что делать bind в рендере это плохо, а не делать bind вобще

и вобще зачем ты делаешь bind в stateless компоненте?

тут говориться что делать bind в рендере это плохо, а не делать bind вобще

Ок, это понятно, это чтобы вызвать верхнюю функцию м алертом

По сути не важно

Имею ввиду, что это мог быть любой компонент, в котором был бы автокомплит

Ок, это понятно, это чтобы вызвать верхнюю функцию м алертом

а без bind alert не сработает?

а без bind alert не сработает?

Сработает

Походу я понял, что надо писать комменты в тестовых заданиях

Потому что у проверяющего может не быть времени или желания копаться, что я имел ввиду в коде

Что то какая-то хуйня в твоём коде

Сказали сделай простой автокомплит, я сделал проще некуда

Походу я понял, что надо писать комменты в тестовых заданиях

тут коменты не помогут, ты сначало разберись зачем bind нужен

const { value } = e.target; let newState = this.state; if (value.length > 0) { newState = { ...newState, show: true}; // нет необходимости копироватить предыдущее состояние } else { newState = { ...newState, show: false }; }; newState = { // нет необходимости копироватить предыдущее состояние ...newState, items: this.getFiltered(value) }; this.setState(newState);

вот зачем это?

http://s.csssr.ru/U8SMMLH99/20180126175346.png Скрин с дев конфига. Как сделать, что бы линтер ошибки подсвечивал, но сборку не ломал? (только для дева надо)

почему нельзя сделать: this.setState(()=>({ show: value.length > 0, items: this.getFiltered(value) });

Кто какие реализации использует Unhandled Rejection?

proceedAutoComplete(text) { //alert(text); this.textInput.value = text; // это не react-way this.setState({ show: false }); this.props.onAutocomplete(text); } зачем this.textInput.value? если можно в стейте хранить значение?

А во

function onAutoCompleteHandle(val) { alert(val); } // нет единого способа именования обработчиков. коллбэки лучше называть handleSomeShit(eventData)

npm unhandled-rejection?

кто нибудь делал на материале компоненту тегов?

Зачем в cdm устанавливать состояние? Для этого есть конструктор

if (e.key === 'Enter' && this.getFiltered(e.target.value).length === 1) { this.proceedAutoComplete(this.getFiltered(e.target.value)); // стоило закэшировать результат this.getFiltered } Вот это вообще не оптимально. Ты делаешь дважды вызов getFiltered

зачем все время превентить события? Если нет необходимости - не нужно

зачем все время превентить события? Если нет необходимости - не нужно

если нет необходимости, то нужно делать пассивный эвент

key={i} Использовать индексы как ключи - крайняя мера. В автокомплите у тебя обычно нет двух элементов с одним и тем же value, стоит использовать его. Иначе вся суть ключей теряется

короче, ты объективно завалил таск

наименование showSuggest - такое, это больше на бул выглядит, чем на определение стилей

почему нельзя сделать: this.setState(()=>({ show: value.length > 0, items: this.getFiltered(value) });

да, просмотрел(

proceedAutoComplete(text) { //alert(text); this.textInput.value = text; // это не react-way this.setState({ show: false }); this.props.onAutocomplete(text); } зачем this.textInput.value? если можно в стейте хранить значение?

думал, что ref как раз юзают дя тех случаев, когда надо автокомплит

лол

реф юзают для доступа к элементу, никоим образом с автокомплитом это не связано

key={i} Использовать индексы как ключи - крайняя мера. В автокомплите у тебя обычно нет двух элементов с одним и тем же value, стоит использовать его. Иначе вся суть ключей теряется

ну в туторах обычно идексы юзают, смотрел по тутору

а надо читать документацию

короче, ты объективно завалил таск

ну я это уже понял, спасибо за фидбек)

When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort

+ ты банально не следуешь конвенциям по порядку описания методов в компоненте

handle мешаются с get

Ребят, подскажите, является ли плохой практикой вызывать setState в componentDidMount ?

Ребят, подскажите, является ли плохой практикой вызывать setState в componentDidMount ?

https://reactjs.org/docs/react-component.html#componentdidmount

ERROR: S client not available

Спасибо

Народ, нужна помощь с mobx и proptypes. Как можно объявить proptypes и defaultprops для @computed гетора стора, который инжектится в компонент?

нормально ли в ТС в литеральных типах наравне со стоковыми значениями указать null? пример: type Pet = 'cat' | 'dog' | null

нормально ли в ТС в литеральных типах наравне со стоковыми значениями указать null? пример: type Pet = 'cat' | 'dog' | null

Конечно. Если у тебя по логике нулл может быть

*наравне пишется так

*наравне пишется так

спасибо за оба ответа )

по-моему, все-таки читабельнее делать const themes = { green: { backgroundColor: '#0f0' } }

нормально ли в ТС в литеральных типах наравне со стоковыми значениями указать null? пример: type Pet = 'cat' | 'dog' | null

Насколько я помню, это не обязательно, null подразумевается по умолчанию

как минимум при создании объекта, если указываешь в интерфейсе тип, например строку, можно положить null, и все будет ок

Отличная надёжность

как в новом react-router лучше всего кпопку превратить в Link? придется создавать Link со стилем кнопки?

Подключил react-router-redux. При смене роута редакс стор меняется, все работает нормально, но когда попробовал диспатчить новый роут из экшэна, то url меняется, а стор нет. И компоненты не перезагружаются. Кто то с таким сталкивался, подскажите, плз!

как в новом react-router лучше всего кпопку превратить в Link? придется создавать Link со стилем кнопки?

const MyBtn = styled.button`` const StyledLink = MyBtn.withComponent(Link)

node.addEventListener(type, handler, {passive: true}) Какое поведение будет у такого вызова? Воспримет оно третий аргумент как useCapture = true или выдаст ошибку? PS. Нет возможности протестить сейчас за неимением старых браузеров

Казалось бы, причем тут реакт...

Сорри, что офтопиком, я просто форкаю preact пока не завезли поддержку встроенную. Вопрос стоял в том, что может там какое-то особое поведение типа assert у функции, что она должна принимать только Boolean третьим аргументом в старых браузерах.

нормально ли в ТС в литеральных типах наравне со стоковыми значениями указать null? пример: type Pet = 'cat' | 'dog' | null

strictNullChecks включен?

ребят, а что делать, если есть большой объект, я его вывожу в таблицу (все его данные по ячейкам - строки), и мне нужно каждую строку изменять в этом объекте через инпуты. Можно как то привязать value каждого инпута к каждому его значению в таблице?

mobx-ом можно что ли такое запилить?.. щас гляну

Кто может понятно объяснить как, что, зачем делает HOC? уже не первый раз слышу, читал статейку на medium, запутали ещё больше

Удобный способ повторного использования кода

Кто может понятно объяснить как, что, зачем делает HOC? уже не первый раз слышу, читал статейку на medium, запутали ещё больше

как - через обертывание компонента в компонент, то есть создание компонента, который внутри себя использует наш оборачиваемый в HOC компонент что - добавляет логику/рендер в другие компоненты, по сути трансформирует/расширяет компонент зачем - чтобы вынести некоторую общую логику и переюзать ее в разных компонентах

Подключил react-router-redux. При смене роута редакс стор меняется, все работает нормально, но когда попробовал диспатчить новый роут из экшэна, то url меняется, а стор нет. И компоненты не перезагружаются. Кто то с таким сталкивался, подскажите, плз!

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

Кто может понятно объяснить как, что, зачем делает HOC? уже не первый раз слышу, читал статейку на medium, запутали ещё больше

На офф сайте прочитай.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

Спасибо! Но разве не должен стейт меняться в любом случае, даже если компонент не перерендривается??

а есть какой то способ отключить принуждение к байндингу в инпутах?

а есть какой то способ отключить принуждение к байндингу в инпутах?

Ты о чем?

Ты о чем?

хочу, что бы можно было писат в input-ах, не привязывая их к state, а потом просто брать из них value