#reactjs #typescript #react-hooks
#реагирует на #машинописный текст #реагируют-крючки
Вопрос:
Я попытался реорганизовать некоторый код реакции и сохранить состояние дисплеев как объект, но теперь состояние, похоже, не обновляется. У меня есть
let initialDisplay = {"javascript": true,"typescript": false} const [displays, setDisplays] = useState(initialDisplay); const setDisplay = (name:language|tool, show:boolean) =gt; { let newDisplays = displays; newDisplays[name] = show; setDisplays(newDisplays); console.log(displays); } , img с
onMouseOver={() =gt; setDisplay(name,true)} onMouseOut={() =gt; setDisplay(name, false)} , и
lt;TechDropdown open={displays.javascript} tech={"javascript"}/gt; lt;TechDropdown open={displays.typescript} tech={"typescript"}/gt; ^Эти компоненты возвращают это:
lt;SlideDowngt; {props.open ? dropDownContent : null} lt;/SlideDowngt; где выпадающее содержимое-это в основном просто имя и изображение
Это правильно утешает.регистрирует обновленный displays объект, но компонент TechDropdown не отображает изменения повторно. Есть какие-нибудь мысли?
(Моя теория: Я изменяю объект отображения вручную с помощью неглубокой копии, а затем, когда я вызываю setDisplays, изменений нет? Я не уверен, дайте мне знать.)
Комментарии:
1. Если быть точным
let newDisplays = displays;, это не поверхностная копия, это просто указание этой переменной на исходный объект. Стандартным способом неглубокого копирования было бы:let newDisplays = {...displays};2. Можете ли вы опубликовать весь компонент целиком? Трудно сказать, как у вас все организовано, исходя из того, что вы опубликовали
3. @DBS Я попробовал синтаксис распространения, и он был очень ошибочным, по крайней мере, он мог измениться с ложного на истинное, но он будет отображаться медленно
4. @BrendanBond Я обновил пост — слайд-шоу-это библиотека реакций
react-slidedown