Size: a a a

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

2021 June 18

TK

Tem Konkov in React — русскоговорящее сообщество
Так что да
Но по факту надо бы её вынести потому что у меня спавнится 3 одинаковые модалки
источник

T

Taras in React — русскоговорящее сообщество
Всем привет
помогите или подскажите, что не так, пожалуйста
Есть такой кусок кода:
 const [statePhones, setStatePhone] = useState(statePhonesObject);
   const handleChangeSize = (e) => {
       const choosedSizeID = Number(e.target.id);
       let newStatePhones = statePhones;
       const _phone = newStatePhones[choosedSizeID].phone;
       const _isActive = newStatePhones[choosedSizeID].isActive;

       newStatePhones[choosedSizeID] = { id: Number(choosedSizeID), phone: _phone, isActive: !_isActive }

       setStatePhone(newStatePhones)
   }
и сам рендер:
  <ul className="phones-list" onClick={(e) => handleChangeSize(e)}>
                               {phoneSizeList.map((phone, index) => (
                                   <div className="phone-block" key={index} id={index}>
                                       {statePhones[index].isActive ? <CircleOptionChoose id={index} /> : <CircleOptionEmpty id={index} />}
                                       <li id={index}>{phone}</li>
                                   </div>
                               ))}
                           </ul>

Проблема в том, что в хендлере все ок, получаю айди, меняю стейт
но перерисовка не происходит
Не подскажете из-за чего это может быть ?
Ошибки вроде нет
источник

Ю

Юрий in React — русскоговорящее сообщество
скорее всего отображает последнюю.
источник

T

Taras in React — русскоговорящее сообщество
вот пример: есть 3 клика, стейт поменялся, но перерендера нет (
источник

Ю

Юрий in React — русскоговорящее сообщество
туплю
источник

N

Nikita in React — русскоговорящее сообщество
попробуй через коллбек изменять стейт
источник

Ю

Юрий in React — русскоговорящее сообщество
а в чем задача? Кликами выделять номера телефонов?
источник

N

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

T

Taras in React — русскоговорящее сообщество
пробовал как-то так setStatePhone((prev) => newStatePhones)
но результата нет
источник

Ю

Юрий in React — русскоговорящее сообщество
а как ты идентифицируешь перерендер? Что должно поменяться?
источник

T

Taras in React — русскоговорящее сообщество
если происходит клик, то вменяется стейт на тру или фалсе  и потом рисуется чекбокс закрашен или нет
источник

T

Taras in React — русскоговорящее сообщество
{statePhones[index].isActive ? <CircleOptionChoose id={index} /> : <CircleOptionEmpty id={index} />}

рисуется чекбокс
источник

Ю

Юрий in React — русскоговорящее сообщество
полностью кастомный чексбокс? А точно не радиобаттон тебе нужен?
источник

T

Taras in React — русскоговорящее сообщество
это обычные svg (закрашен и пустой)
источник

YF

Your Friend in React — русскоговорящее сообщество
у тебя функция handle в самом компоненте лежит? \
источник

T

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

YF

Your Friend in React — русскоговорящее сообщество
покеж
источник

T

Taras in React — русскоговорящее сообщество
    const handleChangeSize = (e) => {
       const choosedSizeID = Number(e.target.id);
       let newStatePhones = statePhones;
       const _phone = newStatePhones[choosedSizeID].phone;
       const _isActive = newStatePhones[choosedSizeID].isActive;

       newStatePhones[choosedSizeID] = { id: Number(choosedSizeID), phone: _phone, isActive: !_isActive }

       setStatePhone((prev) => newStatePhones)
   }
источник

Ю

Юрий in React — русскоговорящее сообщество
А состояние точно меняется? в newStatePhones правильные данные получаются после изменения?
источник

T

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