useRef ({}) object.current имеет ключи с html элементами, но возвращает undefined при попытке доступа к ключам - PullRequest
Новая
       0

useRef ({}) object.current имеет ключи с html элементами, но возвращает undefined при попытке доступа к ключам

0 голосов
/ 16 июня 2020 
let newRefObj = useRef({});
newRefObj.current = {};

//Object.keys(menuData) returns ['angus_burger', 'chicken_sandwiches', 'fish_veg', 'specials', 'salads', 'sides_bevs']

let menuDataArr = Object.keys(menuData).map(categoryID => {
    menuData[categoryID]['eleRef'] = newRefObj.current[categoryID];

    //^newRefObj.current[categoryID] returns undefined even though if I were to console.log(newRefObj.current), 
    the console shows it has keys with the html element 

    return menuData[categoryID];
})

<MenuCategory
    key={uuid()}
    header={category.header}
    note={category.note}
    menuItems={category.menuItems}

    //category.categoryID returns one of the keys above (ie: category.categoryID = 'angus burger')

    ref={el => newRefObj.current[category.categoryID] = el}
    categoryID={category.categoryID}
 />

Итак, я не уверен, что здесь происходит, поскольку после рендеринга родительского компонента, который запускает приведенный выше код, мой объект ref (newRefObj.current) возвращает объект с ключами в нем, который все возвращает элемент html Ссылки. Однако, если бы я использовал console.log (newRefObj.current.angus_burgers) или любой другой ключ, он вернул бы undefined. Я что-то не понимаю в объектах useRef?

Извините, если я недостаточно понимаю. Просто нахожу это немного странным.

Изменить: (весь компонент) 

export default function Menu(props){
let newRefObj = useRef({});
newRefObj.current = {};

let menuDataArr = Object.keys(menuData).map(categoryID => {
    console.log(newRefObj.current.sides_bevs, categoryID)
    menuData[categoryID]['eleRef'] = newRefObj.current[categoryID];
    return menuData[categoryID];
})

let [currentCategory, setCurrentCategory] = useState('');
function executeScroll(ref){
    window.scrollTo({left: 0, top: ref.current.offsetTop - 100, behavior: 'smooth'})
    setCurrentCategory(ref.current.dataset.categoryid)
}

return (
    <div className="Menu">
        <div className="Menu-headerArea">
            <p>Focused on every detail, <span className="Menu-brand">Charred</span> brings our backyard to <span>you</span></p>
        </div>
        <div className="Menu-headerArea Menu-headerArea--secondary">
            <i className="fas fa-hamburger"></i>
            <h3>The Menu</h3>
            <MenuCategoryBtns
                menuDataArr={menuDataArr}
                executeScroll={executeScroll} 
                currentCategory={currentCategory} 
            />
        </div>
        <div className="Menu-board">
            {menuDataArr.map(category => (
                <MenuCategory
                    key={uuid()}
                    header={category.header}
                    note={category.note}
                    menuItems={category.menuItems}
                    ref={el => newRefObj.current[category.categoryID] = el}
                    categoryID={category.categoryID}
                />
            ))}
        </div>
    </div>
)

}

1 Ответ

0 голосов
/ 16 июня 2020

Ваш menuData[categoryID]['eleRef'] = newRefObj.current[categoryID]; всегда будет приводить к настройке undefined, потому что в момент его запуска newRefObj.current пуст (, поскольку вы явно делаете newRefObj.current = {}; прямо перед тем, как установить menuDataArr)

...