Anonymous
ребят, кто-то при стэке React Router 4 + Redux Saga - пробовал делать отделение стэйта от UI? Типа, чтобы логика роутинга, дата фетчинга и воркфлоу происходила без участия UI вообще?
🤴👷‍♂️🦸‍♂️🧚‍♀️
Всем привет. Объясните эту особенность реакта - почему в obj у меня инициализируются дефолтные значения стейта, а не значения, которые я записал строкой выше? this.props.form.validateFields(['login', 'password' ], (err, values) => { if (!err) { this.setState({ current: this.state.current + 1, login: values.login, password: values.password, }); const obj = { login: this.state.login, password: this.state.password, } return this.props.signup(obj) } });
🤴👷‍♂️🦸‍♂️🧚‍♀️
потому что setState асинхронный
Тоже к этому склоняюсь. А как тогда мне писать код?
🤴👷‍♂️🦸‍♂️🧚‍♀️
Я сетаплю сейчас напрямую значения без участия стора, но хотелось бы еще и стор засорить своими данными)
Anonymous
или может кто-то сталкивался, есть nested Switch <Switch> { path: "/organizations", component: OrganizationContainer, exact: false, type: "private" } <Switch> { path: "/organizations/:id/users", component: UsersContainer, exact: true, type: "private" } </Switch> </Switch> в props.match приходит инфа о первом match, хотя внутри еще происходит второй, можно ли до него как-то достучаться?
Andrey
Тоже к этому склоняюсь. А как тогда мне писать код?
принимая во внимание то, что setState асинхронный
Сергей
🤴👷‍♂️🦸‍♂️🧚‍♀️
принимая во внимание то, что setState асинхронный
Выглядит стремно) this.setState({ login: values.login, },() => { console.log(this.state.login); });
Сергей
this.props.form.validateFields(['login', 'password' ], (err, values) => { if (!err) { this.setState({ current: this.state.current + 1, login: values.login, password: values.password, }); const obj = { login, password, } return this.props.signup(obj) } });
Victor
Тоже к этому склоняюсь. А как тогда мне писать код?
Склоняешься? Это вторая фраза в доках про setState :) Варианты: использовать login сразу, не из state; переписать на руках - так будет сложнее сломать
Andrey
Выглядит стремно) this.setState({ login: values.login, },() => { console.log(this.state.login); });
более чем (спойлер: значит компонент делает слишком много вещей)
🤴👷‍♂️🦸‍♂️🧚‍♀️
да и код у тебя странный на самом деле. У тебя выше доступны переменные, котороые ты и загоняешь в state. Бери их напрямую
да там просто визард форма с несколькими шагами валидации, но да, беру просто значения без промежуточного добавления в стор
🤴👷‍♂️🦸‍♂️🧚‍♀️
Andrey
обычная формочка на 4 поля
то что формочка на 4 поля, не значит, что компонент не может делать слишком много
Andrey
здесь он и манипулирует данными, и отображает и валидирует
🤴👷‍♂️🦸‍♂️🧚‍♀️
🤴👷‍♂️🦸‍♂️🧚‍♀️
Китикет
темная стандартная)
Ууу стандартная
Китикет
Horizon надо юзать
Andrey
ну 10 строк логики для всего этого вышло
где 10, если только в сниппете который ты скинул их больше 10?
🤴👷‍♂️🦸‍♂️🧚‍♀️
где 10, если только в сниппете который ты скинул их больше 10?
ну я не беру за логику передать n строчек в пропсы. валидация -> запись в стейт -> смена слайда -> передача в пропсы
Andrey
ну я не беру за логику передать n строчек в пропсы. валидация -> запись в стейт -> смена слайда -> передача в пропсы
ну зря валидация и запись в стейт, это все относится к степу, не более общий компонент степпер только слушает реквесты на обновление инфы от степов, ну и максимум крутит их (и то, логику хранения данных (кроме шага) я бы вынес в стейт-менеджер)
Andrey
всегда если подумать, то можно декомпозировать стейт в плоский и все ВНЕЗАПНО становится оч просто
Arsen
Всем привет посоветуєте решение для рендринга очень большой таблицы, сейчас рендер занимает больше 8сек
🤴👷‍♂️🦸‍♂️🧚‍♀️
ну зря валидация и запись в стейт, это все относится к степу, не более общий компонент степпер только слушает реквесты на обновление инфы от степов, ну и максимум крутит их (и то, логику хранения данных (кроме шага) я бы вынес в стейт-менеджер)
Вот мой компонент, в Step еще компоненты по 70 строк с валидацией. Ну все выглядит просто и понятно, как-то разбивать еще больше ну такое. Ну и стейт тоже плоский <Steps style={{ width: 600, margin: '15px auto' }} current={current}> {steps.map(item => ( <Step key={item.title} title={item.title} /> ))} </Steps>
King Of
Подрубил combineReducers, перестали обновляться глобальные состояния. Мне нужно что-то дополнительно допиливать в диспатчи или что?
Vladimir
Редакс юзаем обычно, просто в одном месте нужно так
Vladimir
Зачем ты редакс так юзаешь
Китикет
Редакс юзаем обычно, просто в одном месте нужно так
А, мне показалось что такое далеко не в одном месте)
Илья
https://prnt.sc/ogpyfk кто-то знает, есть такой элемент в Material UI?
Andre
toggle-button
Илья
toggle-button
что-то везде переключатели обычные гуглятся, может есть прям такой компонент, с двумя кнопками и лейблами?
Mihail
Horizon надо юзать
спс, забрал
Mihail
топовая
Китикет
Mihail
Тоже к этому склоняюсь. А как тогда мне писать код?
this.setState((prevState) => { return { current: prevState.current + 1 }; });
Китикет
🤴👷‍♂️🦸‍♂️🧚‍♀️
Тоже вставить туда values.password и тд
Я так и сделал, лучше чем через колбек
Oleg
есть useEffect c апдейтом на одно свойство. реакт выдал ошибку переполнения. проверил, этот параметр имеет одно и то же значение. но useEffect тригерится. почему?
Vadim
видимо оно не одно и то же
Anton
Всем привет. Подскажите пжлст, как лучше всего в реакте перебрать 2 массива одновременно? Есть 2 массива: questions, answers, который надо отрендерить на странице. Образец того, как должно быть на странице: <div> <p>questions[0]</p> <p>answers[0]</p> ... // остальное </div> <div> <p>questions[1]</p> <p>answers[1]</p> ... // остальное </div> ... как такое отрисовать?
Oleg
что за значение?
так я проверил. вывел его.
Vadim
так я проверил. вывел его.
и как ты определил, что значение старое?
Vadim
debugger
ты хочешь чтобы мы гадали что у тебя там? Напиши конкретно
Oleg
ты хочешь чтобы мы гадали что у тебя там? Напиши конкретно
useEffect(() => { jexl.addTransform('jPath', (val) => { return jp.query(dataSpaceModel, val)[0]; }); console.log(dataSpaceModel); debugger; const answer = checkCondition(); setFieldsPropsFromCondition(answer); }, [dataSpaceModel]); const mapStateToProps = (state) => { const ... debugger return { ... dataSpaceModel: formsPreview ? dataSpaceModel : transactionModel, }; };
Oleg
ты хочешь чтобы мы гадали что у тебя там? Напиши конкретно
не знаю, что тут описать. вывожу переменную, она одинакова.
Vadim
или что там хранится?
Vadim
там объект.
видимо он пересоздается постоянно
Vadim
другого варианта нет
Anton
questions.map(i => <div>{i})
но как вместе с ним перебрать и answers? надо чтобы вопрос-ответ в диве по очереди размещались.
Oleg
видимо он пересоздается постоянно
секунду... я не могу написать const transactionModel = { ...transaction.data.transactionModels[0], }; ?
Vadim
секунду... я не могу написать const transactionModel = { ...transaction.data.transactionModels[0], }; ?
можешь, но ссылка всегда будет новая. Отсюда и срабатывание эффекта
Vadim
я тебе уже говорил читать доку как-то))
Oleg
можешь, но ссылка всегда будет новая. Отсюда и срабатывание эффекта
я просто думал, ридакс на себя возьмёт проверку, если проп одинаков
Vadim
я просто думал, ридакс на себя возьмёт проверку, если проп одинаков
как он будет одинаков, если ты всегда новую ссылку делаешь
Mihail
Это не примитивы
Mihail
Ребята, учите жс сначала
Mihail
Намного себе жизнь упростите
Oleg
ребят! подскажите, че за лажа происходит с addEventListener. Смотрите https://codepen.io/artof/pen/MNWEMN если заменить let [count, setCount] = React.useState(0); на const ... - что как бы логично, ведь именно так должна вестись работа со стейтом... То почему-то на выходе получаем ошибку в консоли Uncaught TypeError: Assignment to constant variable. что переводится как, дословно, "нельзя переопределять константы". Заменяем const на let и все работает прям как надо. каунтер должен пересчитываться на любое нажатие в инпуте. Кто знает - какого хрена так происходит?
Cenator 🐈
Полезно будет