Но тогда же компонент перерисовывается, не? Разве это не плохо?

компонент должен перерисовываться, это как бы его назначение

функцию передавать

а ну видел такое да. но реф как-то удобнее хз

Отлично, срочно в прод!

Никто не сталкивался с ситуацией, когда делаешь setState, а в render падает СТАРЫЙ стейт?

sCU?

Привет, ребят, кто может подсказать, оч странная штука происходит — есть элемент <Post />, который коннектится к redux через connect. Если у Post есть replies, то внутри него рисуются такие же Post в количестве replies. Все работает ок до тех пор пока не начинают отрисовываться сами реплаи. Они отрисовываются через replies.map(() => <Post>), само собой, со всеми необходимыми пропсами. Но в дочерних <Post>, именно тех, что маппятся, коннекта к редуксу не происходит. С чем может быть связано и что гуглить?

Никто не сталкивался с ситуацией, когда делаешь setState, а в render падает СТАРЫЙ стейт?

setState асинхронный, всё может быть)

setState асинхронный, всё может быть)

я кидал туда колбек, но в колбеке тоже старый стейт

я не понимаю, что это за магия такая

покажи компонент)

в коллбек приходит последний стейт, по идее

Всем привет, подскажите плз. Допустим, у меня есть компонент MyInput, состоящий из input. Как мне получить из компонента App value компонента MyInput с помощью ref?

если обращение непосредственно к value дом ноды необходимо, то компонент MyInput мог бы экспоузить метод .getInput(), и тогда достаточно к MyInput прилепить ref и всё. Но в большинстве же случаев метода onChange у MyInput должно быть достаточно

а есть еще варик

в коллбек приходит последний стейт, по идее

в колбек ничего не приходит

document.querySelector('.input').value

везде работает!

в колбек ничего не приходит

окай, он вызывается, когда this.state последний

или даже круче. findDOMNode(this).querySelector('input').value

два разных объекта в консоли

в том плане, что this.state так и остался старым (:

может у тебя в методе this не тот?

?

а зачем this.state в setState?

setState - всё равно мёржит состояния а не заменяет

а зачем this.state в setState?

это я затупил, привык к редуксу

интересно, если scu = () => false, при setState коллбэк вызовется?

если обращение непосредственно к value дом ноды необходимо, то компонент MyInput мог бы экспоузить метод .getInput(), и тогда достаточно к MyInput прилепить ref и всё. Но в большинстве же случаев метода onChange у MyInput должно быть достаточно

Спасибо, я только начинаю с реактом баловаться. Я просто не понимаю, как тогда с формой работать? В форме у меня 5-10 компонентов MyInput, как мне со всех собрать value и отправить на сервер? Не понятно пока что(

$ajax.post url, components.map (component) => component.state

псевдокод конечно

$ajax.post url, components.map (component) => component.state

Идею понял, спасибо!

Но вообще, если нужно использовать текущий стейт в setState, можно еще так делать this.setState(state => ({ visible: !state.visible, });

интересно, если scu = () => false, при setState коллбэк вызовется?

https://jsfiddle.net/69z2wepo/63900/ вызовется, интересно)

Похоже, я нашел, в чем проблема. У меня там много асинхронных обновлений, и, похоже, они конфликтовали с setState по времени

Спасибо, я только начинаю с реактом баловаться. Я просто не понимаю, как тогда с формой работать? В форме у меня 5-10 компонентов MyInput, как мне со всех собрать value и отправить на сервер? Не понятно пока что(

это зависит от того, как ты вообще в форме данные хранишь, используешь ли controlled inputs или нет Как самый простой вариант — инпуты с defaultValue и <form onSubmit={this.handleSubmit} /> handleSubmit(evt) { const data = new FormData(evt.target); fetch('/api/form', { method: 'post', body: JSON.stringify(data), }); }

и вообще dom api у форм и инпутов очень неплохой Я раньше восхищался тем, сколько всего полезного ангуляр позволяет с формами делать А теперь вижу, что браузеры поддерживают почти всё необходимое: pattern атрибут, метод checkValidity, :invalid псевдоселектор. Больше даже вроде не нужно ничего)

это зависит от того, как ты вообще в форме данные хранишь, используешь ли controlled inputs или нет Как самый простой вариант — инпуты с defaultValue и <form onSubmit={this.handleSubmit} /> handleSubmit(evt) { const data = new FormData(evt.target); fetch('/api/form', { method: 'post', body: JSON.stringify(data), }); }

Да, я использую controlled inputs. А что насчет такого варианта? <form onSubmit={this.handleSubmit.bind(this)})> <MyInput type="text" label="Username" placeholder="Admin" ref="username"/> </form> handleSubmit(e) { e.preventDefault(); this.sendFormData(); } sendFormData() { let formData = { username: this.refs.username.state.value }; тут send formData } То есть получается, что я хочу работать через this.refs.username.state.value. Такой вариант нормальный? Или это тоже не best practices?

бинды это плохо

чувак тебе сказали как нормально))

в последней версии реакта ref должно быть функцией

либо пробрасывай наверх значение

либо пробрасывай defaultValue + name и сериализуй через form-api

все остальное - больная фантазия и так делать не нужно. или тихо, чтобы никто не видел

Понял, буду разбираться, спасибо)

Да, я использую controlled inputs. А что насчет такого варианта? <form onSubmit={this.handleSubmit.bind(this)})> <MyInput type="text" label="Username" placeholder="Admin" ref="username"/> </form> handleSubmit(e) { e.preventDefault(); this.sendFormData(); } sendFormData() { let formData = { username: this.refs.username.state.value }; тут send formData } То есть получается, что я хочу работать через this.refs.username.state.value. Такой вариант нормальный? Или это тоже не best practices?

controlled инпуты — полное противоречие refs.username.state.value; Сделай, чтобы MyInput по-нормальному использовал onChange prop и храни весь стейт в компоненте с формой вместо рефов. А для начала наверное сделай то же самое с обычными input'ами

controlled инпуты — полное противоречие refs.username.state.value; Сделай, чтобы MyInput по-нормальному использовал onChange prop и храни весь стейт в компоненте с формой вместо рефов. А для начала наверное сделай то же самое с обычными input'ами

То есть ты предлагаешь все значения формы хранить в её state?

разумеется!

?

Я просто где-то читал, что советуется как можно реже использовать state :(

Я просто где-то читал, что советуется как можно реже использовать state :(

поэтому у тебя каждый MyInput держит свой стейт, который ты ещё и выдёргиваешь из вне?)

поэтому у тебя каждый MyInput держит свой стейт, который ты ещё и выдёргиваешь из вне?)

Да...) Спасибо всем!

Народ, что значит эта запись? {...todo} Я знаю, что в ECMAScript 6 есть такая запись для массивов [...todo] Но в случае с объектом, IDE показывает ошибку

Google: spread/rest operator es6

пробел убери

пробел убери

да, без пробела, просто тут руками вбил

пробел убери

именно

что за IDE ?

https://learn.javascript.ru/destructuring

прочти

NetBeans самая последняя тестовая версия, поддержка ECMAScript 6 имеется, даже некоторые фичи из 7 есть

да он прочел, у него иде ошибку показывает:)

хм

в netBeans не подскажу, сорян

Народ, что значит эта запись? {...todo} Я знаю, что в ECMAScript 6 есть такая запись для массивов [...todo] Но в случае с объектом, IDE показывает ошибку

в данном случае копия объекта

типа Object.assign({}, todo)

А, все, понял. Это чисто проблема NetBeans, надо написать багрепорт. Уже было такое, когда нормально не поддерживались классы ECMAScript 6, написал багрепорт, в тот же день исправили.

const TodoList = ({ todos, onTodoClick }) => ( <ul> {todos.map(todo => <Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} /> )} </ul> ) Не могу разобрать, что тут происходит, конкретно внутри тегов <ul>. 1) Для чего всё что внутри <ul> обёрнуто в фигурные скобки? 2) Что значит {...todo} внутри класса <Todo />? Даже если вместо {...todo} написать Object.assign({}, todo), мне все равно не понятно, что это значит.

ERROR: S client not available

1) посмотри как jsx код js вставляется

2) это развёртка объекта на параметры в функцию

А, понял, скобки для вставки Js, вспомнил.

2) Развертка объекта - это понятно. Как сказал Сергей Сова выше, в данном случае это просто копия объекта, тогда для простоты перепишу код вот в этом виде: const TodoList = ({ todos, onTodoClick }) => ( <ul> {todos.map(todo => <Todo key={todo.id} {1: 'name', 2: 'surname'} onClick={() => onTodoClick(todo.id)} /> )} </ul> ) Что это значит? Можно ли так писать?

нет :)

типа Object.assign({}, todo)

всегда думал что {...args} это f.apply(null, args);

всегда думал что {...args} это f.apply(null, args);

а где здесь f?

const a = {…b, c} это ни что иное const a = Object.assign({}, b, {c})

понял о каком контексте использования идет речь

Как можно еще записать эту запись? <Display {...props} /> Если props = {name: 'Timur', surname: 'Murtukov'}

всегда думал что {...args} это f.apply(null, args);

путаешь с fn(...args)

и это не то же самое, хотя результат тот же

путаешь с fn(...args)

да я не выкупил в каком контексте был вопрос )

<Display name={props.name} surname={props.surname} />

const { name, surname } = this.props; <Display name={name} surname={surname} />

<Display name={props.name} surname={props.surname} />

А, ну теперь понял, спасибо

Насколько я понял, это фича самого React, а не js. Я имею ввиду запись <Display {...props} />

Нет

Это фича бабеля, а в будущем и js

Object spread

Вечно их путаю

Ну, сказать, фича бабеля, наверное не верно, скорее фича ECMAScript 7

пока это строго фича бабеля

вот именно {…some} это предложение в ECMA

Завернут формат и всё, нет фичи

А в ES7 его уже нет

Изначально)

В js это всё пока в будущем времени

хорошо, по порядку. Допустим это фича ECMA, не важно. Тогда, отбросив в сторону реакт, как можно записать вот это? var test = {...someVariable} Если someVariable = {name: 'Andrey', surname: 'Sidorov'}

Выше же писали уже const a = Object.assign({}, someVariable)

хорошо, по порядку. Допустим это фича ECMA, не важно. Тогда, отбросив в сторону реакт, как можно записать вот это? var test = {...someVariable} Если someVariable = {name: 'Andrey', surname: 'Sidorov'}

Так и пиши, у тебя всё равно уже бабель в проекте)) Но да, аналог — это Object.assign

на реакте ни кто постоянку не ищет?