Size: a a a

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

2021 June 18

AS

Alexei Shulzhickij in React — русскоговорящее сообщество
Ну, после render есть render children
источник

AS

Alexei Shulzhickij in React — русскоговорящее сообщество
Об этом и речь
источник

AS

Alexei Shulzhickij in React — русскоговорящее сообщество
Попробуй сделать несколько render
источник

И

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

A

Ali in React — русскоговорящее сообщество
Да, я это знаю. Но во многих статьях советую делать так. Якобы это защищает от ненужных ререндеров
источник

A

Ali in React — русскоговорящее сообщество
Что значит несколько ? У компонента ведь 1 есть рендер
источник

AS

Alexei Shulzhickij in React — русскоговорящее сообщество
Понял
источник

A

Ali in React — русскоговорящее сообщество
Может это как то связанно с Class компонентами, может там с этим была "Проблема", но на функциональных я не могу это проблему словить
источник

И

Иван in React — русскоговорящее сообщество
источник

T

Taras in React — русскоговорящее сообщество
Мужики, снова к Вам просьба помочь
есть вот такой кусок кода, который формирует объект
для связи апп и мембер
class Application {
   constructor(idApp, isSelected, appName) {
       this.idApp = idApp;
       this.isSelected = isSelected;
       this.appName = appName;
   }

   toggleSelected() {
       this.isSelected = !this.isSelected
   }
};

class Member {
   constructor(idMember, memberName, memberEmail, apps) {
       this.idMember = idMember;
       this.memberName = memberName;
       this.memberEmail = memberEmail;
       this.apps = apps;
   }
};

const appsObject = appsFromBase.map((item, i) => new Application(i, false, item));
const membersObject = teamMembers.map((item, i) => new Member(item.idMember, item.name, item.email, appsObject));
его записываю в стейт
const [members, setMembers] = useState(membersObject);
и хендлер (здесь я получаю id member и вызываю для него метод, который меняет true/false)
   const handleChoosenApp = (app, member_i) => {
       let newMembers = members;
       let _id = app.idApp;
       
       if (_id !== 'btn-all-app') {
           newMembers[member_i].apps[_id].isSelected = !newMembers[member_i].apps[_id].toggleSelected()

           setMembers(newMembers);
       }
   }
загвоздка в том, что этот метод меняет состояние абсолютно всех мемберов
хотя я явно указываю, что менять нужно у конкретного мембера
newMembers[member_i].apps[_id].toggleSelected()
источник

MB

Marsel Bisengaliev in React — русскоговорящее сообщество
Скинь скрин кода, так читать не удобно
источник

A

Ali in React — русскоговорящее сообщество
Спасибо за пример, но это вообще не то, тут просто показывается useCallback который "кеширует" эту функцию и не пересоздает заново, поэтому компонент и не ререндериться.

Суть вопроса была почему советуют НЕ использовать

<component onClick={() => {}} />
источник

И

Иван in React — русскоговорящее сообщество
именно поэтому
источник

T

Taras in React — русскоговорящее сообщество
источник

И

Иван in React — русскоговорящее сообщество
это НЕ копирование
источник

T

Taras in React — русскоговорящее сообщество
ссылка
я могу и напрямую
проблема та же самая
    const handleChoosenApp = (app, member_i) => {
       let _id = app.idApp;

       if (_id !== 'btn-all-app') {
           members[member_i].apps[_id].toggleSelected()

           setMembers(members);
       }
   }
источник

И

Иван in React — русскоговорящее сообщество
проблема в том, что в setMembers нужно положить новую ссылку
источник

И

Иван in React — русскоговорящее сообщество
источник

T

Taras in React — русскоговорящее сообщество
   const handleChoosenApp = (app, member_i) => {
       let newMembers = {...members};
       let _id = app.idApp;

       if (_id !== 'btn-all-app') {
           newMembers[member_i].apps[_id].toggleSelected()

           setMembers(newMembers);
       }
   }
источник

A

Ali in React — русскоговорящее сообщество
Понял, спасибо.

Но все равно вопрос остается открытом в плане если НЕ использовать useCallback (ибо его не запихнуть внутрь рендера), то фактически будет Без разницы или я напишу  внутри onClick инлайново, или я ДО рендера функцию и передам её во внутрь
источник