Size: a a a

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

2020 October 29

N

Nuruddin in React — русскоговорящее сообщество
Здравствуйте в
 
этом коде пытаюсь обернуть присвоение полей формы в отдельную функцию makeFormdata -так код не работает , однако, если без этой функции (комментируем то что выделено жирным и раскоментируем то что под ним )-то работает , в чем может быть дело ? по идее же одно и тоже происходит . В дебаггере , даже не заходит внутрь функции makeFormdata , когда дохожу до этой функции и жму след шаг или шаг внутрь функции  сразу выдается ошибка:
  if (isActuallyValid) {
       // Proceed with submit...
       //
       // To respect sync submit fns, we can't simply wrap executeSubmit in a promise and
       // _always_ dispatch SUBMIT_SUCCESS because isSubmitting would then always be false.
       // This would be fine in simple cases, but make it impossible to disable submit
       // buttons where people use callbacks or promises as side effects (which is basically
       // all of v1 Formik code). Instead, recall that we are inside of a promise chain already,
       //  so we can try/catch executeSubmit(), if it returns undefined, then just bail.
       // If there are errors, throw em. Otherwise, wrap executeSubmit in a promise and handle
       // cleanup of isSubmitting on behalf of the consumer.
       var promiseOrUndefined;

       try {
         promiseOrUndefined = executeSubmit(); // Bail if it's sync, consumer is responsible for cleaning up
         // via setSubmitting(false)

         if (promiseOrUndefined === undefined) {
           return;
         }
       } catch (error) {
         throw error;
       }
основной код:
const makeFormdata = (volunteer, phone, statusid = volunteer.status.id, comment = volunteer.comment) => {
       var data = new FormData();
       data.append('firstname', volunteer.firstname)
       data.append('lastname', volunteer.lastname)
       data.append('patronymic', volunteer.patronymic)
       data.append('phone', parseInt(phone))
       data.append('password', volunteer.password)
       data.append('date_of_birth', volunteer.date_of_birth)
       data.append('address', volunteer.address)
       data.append('status_id', statusid)
       data.append('comment', comment)
       return data
   }
   var content = { 'Content-Type': 'multipart/form-data' }
   const getPhone = (values, initphone) => {
       let finphone;
       var ph = values.phone.replace(/[- )(+]/g, '');
       if (initphone !== ph) {
           finphone = ph
       } else {
           finphone = `7${initphone}`
       }
       return finphone
   }
   const submitForm = (values, initphone) => {
       if (values.password && values.confPassword && values.password !== values.confPassword) {
           return;
       }
       delete values.confPassword

       if (values.phone.includes("_")) {
           seterror(true)
           values.password = ""
           values.confPassword = ""
           return;
       }
       let finphone = getPhone(values, initphone)
     
 const data = makeFormdata(values, finphone);
        /*    var data = new FormData();
     /*    data.append('firstname', values.firstname)
           data.append('lastname', values.lastname)
           data.append('patronymic', values.patronymic)
           data.append('phone', parseInt(finphone))
           data.append('password', values.password)
           data.append('date_of_birth', values.date_of_birth)
           data.append('address', values.address)
           if (urlPath.includes("req")){
               data.append('status_id', values.status.id)
               data.append('comment', values.comment)
           }*/
       values.password = ""
       values.confPassword = ""
       save(data, "volunteers", content, !urlPath.includes("newvolunteer"), id ? id : null)
   }
источник

DA

Danya Adadurov in React — русскоговорящее сообщество
Ребятки рассудите: если верстать на реакте по-дедовски, закладывая некоторые состояния отображения (ну там открыт табчик или закрыт, активна кнопка/неактивна) путём добавления дополнительных классов к DOM-элементам используя БЭМ-методологию, это ОК или прошлый век и лучше юзать module.css и css in js?
источник

BB

Bugs Bunny in React — русскоговорящее сообщество
Nuruddin
Здравствуйте в
 
этом коде пытаюсь обернуть присвоение полей формы в отдельную функцию makeFormdata -так код не работает , однако, если без этой функции (комментируем то что выделено жирным и раскоментируем то что под ним )-то работает , в чем может быть дело ? по идее же одно и тоже происходит . В дебаггере , даже не заходит внутрь функции makeFormdata , когда дохожу до этой функции и жму след шаг или шаг внутрь функции  сразу выдается ошибка:
  if (isActuallyValid) {
       // Proceed with submit...
       //
       // To respect sync submit fns, we can't simply wrap executeSubmit in a promise and
       // _always_ dispatch SUBMIT_SUCCESS because isSubmitting would then always be false.
       // This would be fine in simple cases, but make it impossible to disable submit
       // buttons where people use callbacks or promises as side effects (which is basically
       // all of v1 Formik code). Instead, recall that we are inside of a promise chain already,
       //  so we can try/catch executeSubmit(), if it returns undefined, then just bail.
       // If there are errors, throw em. Otherwise, wrap executeSubmit in a promise and handle
       // cleanup of isSubmitting on behalf of the consumer.
       var promiseOrUndefined;

       try {
         promiseOrUndefined = executeSubmit(); // Bail if it's sync, consumer is responsible for cleaning up
         // via setSubmitting(false)

         if (promiseOrUndefined === undefined) {
           return;
         }
       } catch (error) {
         throw error;
       }
основной код:
const makeFormdata = (volunteer, phone, statusid = volunteer.status.id, comment = volunteer.comment) => {
       var data = new FormData();
       data.append('firstname', volunteer.firstname)
       data.append('lastname', volunteer.lastname)
       data.append('patronymic', volunteer.patronymic)
       data.append('phone', parseInt(phone))
       data.append('password', volunteer.password)
       data.append('date_of_birth', volunteer.date_of_birth)
       data.append('address', volunteer.address)
       data.append('status_id', statusid)
       data.append('comment', comment)
       return data
   }
   var content = { 'Content-Type': 'multipart/form-data' }
   const getPhone = (values, initphone) => {
       let finphone;
       var ph = values.phone.replace(/[- )(+]/g, '');
       if (initphone !== ph) {
           finphone = ph
       } else {
           finphone = `7${initphone}`
       }
       return finphone
   }
   const submitForm = (values, initphone) => {
       if (values.password && values.confPassword && values.password !== values.confPassword) {
           return;
       }
       delete values.confPassword

       if (values.phone.includes("_")) {
           seterror(true)
           values.password = ""
           values.confPassword = ""
           return;
       }
       let finphone = getPhone(values, initphone)
     
 const data = makeFormdata(values, finphone);
        /*    var data = new FormData();
     /*    data.append('firstname', values.firstname)
           data.append('lastname', values.lastname)
           data.append('patronymic', values.patronymic)
           data.append('phone', parseInt(finphone))
           data.append('password', values.password)
           data.append('date_of_birth', values.date_of_birth)
           data.append('address', values.address)
           if (urlPath.includes("req")){
               data.append('status_id', values.status.id)
               data.append('comment', values.comment)
           }*/
       values.password = ""
       values.confPassword = ""
       save(data, "volunteers", content, !urlPath.includes("newvolunteer"), id ? id : null)
   }
пожалуйста, пользуйся сервисами для шаринга кода. это нечитабельнаая портянка. paste.bin, codesandbox.io etc
источник

N

Nuruddin in React — русскоговорящее сообщество
Bugs Bunny
пожалуйста, пользуйся сервисами для шаринга кода. это нечитабельнаая портянка. paste.bin, codesandbox.io etc
понял
источник

BB

Bugs Bunny in React — русскоговорящее сообщество
Danya Adadurov
Ребятки рассудите: если верстать на реакте по-дедовски, закладывая некоторые состояния отображения (ну там открыт табчик или закрыт, активна кнопка/неактивна) путём добавления дополнительных классов к DOM-элементам используя БЭМ-методологию, это ОК или прошлый век и лучше юзать module.css и css in js?
в реактах наших управлять видимостью надо из JSX, а не классами. чтобы не нагружать браузер лишними дом-нодами
источник

S

Stanislav in React — русскоговорящее сообщество
Danya Adadurov
Ребятки рассудите: если верстать на реакте по-дедовски, закладывая некоторые состояния отображения (ну там открыт табчик или закрыт, активна кнопка/неактивна) путём добавления дополнительных классов к DOM-элементам используя БЭМ-методологию, это ОК или прошлый век и лучше юзать module.css и css in js?
css-in-js оверкилл если то что вы делаете простой проект без дизайн системы или ее подобия, БЭМ это не дедовский способ, а вполне нормально, и тем не менее css модули мне кажутся лучшим решением для большинства задач

это мое мнение.
источник

DA

Danya Adadurov in React — русскоговорящее сообщество
Bugs Bunny
в реактах наших управлять видимостью надо из JSX, а не классами. чтобы не нагружать браузер лишними дом-нодами
Получается, что БЭМ-методология в корне не годится для реакта?
источник

А

Александр in React — русскоговорящее сообщество
Danya Adadurov
Ребятки рассудите: если верстать на реакте по-дедовски, закладывая некоторые состояния отображения (ну там открыт табчик или закрыт, активна кнопка/неактивна) путём добавления дополнительных классов к DOM-элементам используя БЭМ-методологию, это ОК или прошлый век и лучше юзать module.css и css in js?
То, что ты в начале описал не зависит от того, как ты пишешь стили, навесить доп. класс в любом случае можно. Если юзаешь бэм, то никто не запрещает применять его и модули одновременно, всё-таки одно другое не заменяет полностью, хотя тут наверно большинство другого мнения.
источник

BB

Bugs Bunny in React — русскоговорящее сообщество
Danya Adadurov
Ребятки рассудите: если верстать на реакте по-дедовски, закладывая некоторые состояния отображения (ну там открыт табчик или закрыт, активна кнопка/неактивна) путём добавления дополнительных классов к DOM-элементам используя БЭМ-методологию, это ОК или прошлый век и лучше юзать module.css и css in js?
насчет active-не active — да, классами. да, css-modules или css-in-js
источник

DK

Dmitry Kudryavtsev in React — русскоговорящее сообщество
Danya Adadurov
Ребятки рассудите: если верстать на реакте по-дедовски, закладывая некоторые состояния отображения (ну там открыт табчик или закрыт, активна кнопка/неактивна) путём добавления дополнительных классов к DOM-элементам используя БЭМ-методологию, это ОК или прошлый век и лучше юзать module.css и css in js?
в модулях тяжелее запутаться как по мне. И легче искать потом через браузер
источник

NT

Nikolay Tolochnyy in React — русскоговорящее сообщество
Danya Adadurov
Получается, что БЭМ-методология в корне не годится для реакта?
ну в реакте ты можешь не забывать что у тебя есть блок и он задаёт margin для элементов)
источник

BB

Bugs Bunny in React — русскоговорящее сообщество
Danya Adadurov
Получается, что БЭМ-методология в корне не годится для реакта?
ну такое. зачем, когда есть css-modules или css-in-js. а насчет дебага чел загнул. в дев режиме имена классов остаются теми же, что в файле модуля + хэш. в проде имена выпиливаются
источник

DA

Danya Adadurov in React — русскоговорящее сообщество
Александр
То, что ты в начале описал не зависит от того, как ты пишешь стили, навесить доп. класс в любом случае можно. Если юзаешь бэм, то никто не запрещает применять его и модули одновременно, всё-таки одно другое не заменяет полностью, хотя тут наверно большинство другого мнения.
Модули вообще никак не стакаются с БЭМ. Ничто не стакается с БЭМ в принципе, т.к. эта система замкнута сама в себе и любые сторонние сущности напрочь рушат концепцию бэм, тем более модульный КСС
источник

DA

Danya Adadurov in React — русскоговорящее сообщество
Да я в целом про организацию CSS кода говорю
источник

DA

Danya Adadurov in React — русскоговорящее сообщество
Модульность плохо решает проблему реюзабельности CSS сущностей
источник

BB

Bugs Bunny in React — русскоговорящее сообщество
Danya Adadurov
Модульность плохо решает проблему реюзабельности CSS сущностей
каво? реюзать надо не css-сущности, а компоненты
источник

BB

Bugs Bunny in React — русскоговорящее сообщество
если уж тебе приспичило реюзать css-сущности, воткни less или sass
источник

А

Александр in React — русскоговорящее сообщество
Danya Adadurov
Модули вообще никак не стакаются с БЭМ. Ничто не стакается с БЭМ в принципе, т.к. эта система замкнута сама в себе и любые сторонние сущности напрочь рушат концепцию бэм, тем более модульный КСС
Ничего не рушат модули, разве что отпадает надобность в длинных именах для классов, что только плюс, работать через миксины, модификаторы, блоки и элементы по прежнему можно остаётся, как и юзать стили написания классов, чтобы сразу понятно было что есть что.
источник

DA

Danya Adadurov in React — русскоговорящее сообщество
Она подходит к компонентному подходу. Т.е. ты создал компонент и пихай куда угодно. Но что, если мне надо создать похожий компонент, а стили у него похожи с первым. Тут бы БЭМ выручил неплохо, а модульная ксс в этом случае всё портит
источник

DA

Danya Adadurov in React — русскоговорящее сообщество
Александр
Ничего не рушат модули, разве что отпадает надобность в длинных именах для классов, что только плюс, работать через миксины, модификаторы, блоки и элементы по прежнему можно остаётся, как и юзать стили написания классов, чтобы сразу понятно было что есть что.
Но это и создает путаннцу, плюс к этому концепция "один файл - один блок" не совсем укладывается в модульность, т.к. модуль сам по себе принадлежит целому компоненту, а деление на блоки и деление на компоненты отличаются
источник