@naddurkostia

Почему после добавления localSotrage в React проект, то вместо содержимого сайта показывает просто серый экран?

После добавления localStorage в код вместо содержимого показывает просто бэкграунд который был задан в стилях.
Фото: nbTDDpe.png

Код Item.jsx

import React, { useState } from 'react'
// import PropTypes from "prop-types";
import Modal from '../Modal/Modal';
import './Item.scss'



export default function App() {

    // BAD CODE HERE ПЛОХОЙ КОД ЗДЕСЬ
    let btnDsn = document.querySelector("#star");
    localStorage.setItem('Name', 'CLICKED');
    let name = localStorage.getItem('Name');

    (function () {
        btnDsn.onclick = function () {
            btnDsn.textContent = name;
        };
    })();
    // 

    const [show, setShow] = useState(false);
    return (
        <div className='items'>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
            <div className="row">
                <div className="column" style={{ "background-color": "#FFFFFF", "border-style": "solid", "border-color": "gray", "border-radius": "10px" }}>
                    <img src="https://bit.ly/3WKDKMm" alt="" className='music-cover' />
                    <h2 className='text'>Santa</h2>
                    <p className='article'>Article: 21412</p>
                    <p className='color'>Colors: yellow/blue/green</p>
                    <p className='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <button onClick={() => setShow(true)} className="show-button">Add to cart</button>
                    <Modal title="My Modal" onClose={() => setShow(false)} show={show}>
                    </Modal>
                    <button className="star-button" id='star'><i class="fa fa-star"></i></button>

                    <p className='price'>10$</p>
                </div>
                {/* <div className="column" style={{ "background-color": "#FFFFFF", "border-style": "solid", "border-color": "gray", "border-radius": "10px"}}>
                    <img src="https://bit.ly/3fKDUma" alt="" className='music-cover'/>
                    <h2 className='text'>{data[1].name}</h2>
                    <p className='article'>Article: {data[1].article}</p>
                    <p className='color'>Colors: black/red</p>
                    <p className='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
                    <button onClick={() => setShow(true)} className="show-button">Add to cart</button>
                    <Modal title="My Modal" onClose={() => setShow(false)} show={show}>
                    </Modal>   
                    <button class="star-button star2"><i class="fa fa-star"></i></button>
                    <p className='price'>10$</p>
                </div>
            </div>
            <div className="row">
                <div className="column" style={{ "background-color": "#FFFFFF", "border-style": "solid", "border-color": "gray", "border-radius": "10px"}}>
                    <img src="https://cutt.ly/K1HzmYB" alt="" className='music-cover'/>
                    <h2 className='text'>{data[3].name}</h2>
                    <p className='article'>Article: {data[2].article}</p>
                    <p className='color'>Colors: yellow/blue/green</p>
                    <p className='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <button onClick={() => setShow(true)} className="show-button">Add to cart</button>
                    <Modal title="My Modal" onClose={() => setShow(false)} show={show}>
                    </Modal>
                    <button className="star-button star1"><i class="fa fa-star"></i></button>
                    
                    <p className='price'>10$</p>
                </div>
                <div className="column" style={{ "background-color": "#FFFFFF", "border-style": "solid", "border-color": "gray", "border-radius": "10px"}}>
                    <img src="https://bit.ly/3fKDUma" alt="" className='music-cover'/>
                    <h2 className='text'>The Train</h2>
                    <p className='article'>Article: {data[3].article}</p>
                    <p className='color'>Colors: black/red</p>
                    <p className='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
                    <button onClick={() => setShow(true)} className="show-button">Add to cart</button>
                    <Modal title="My Modal" onClose={() => setShow(false)} show={show}>
                    </Modal>   
                    <button class="star-button star2"><i class="fa fa-star"></i></button>
                    <p className='price'>10$</p>
                </div>
            </div>
            <div className="row">
                <div className="column" style={{ "background-color": "#FFFFFF", "border-style": "solid", "border-color": "gray", "border-radius": "10px"}}>
                    <img src="https://bit.ly/3NK7PqZ" alt="" className='music-cover'/>
                    <h2 className='text'>{data[2].name}</h2>
                    <p className='article'>Article: {data[4].article}</p>
                    <p className='color'>Colors: black/blue/white</p>
                    <p className='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
                    <button onClick={() => setShow(true)} className="show-button">Add to cart</button>
                    <Modal title="My Modal" onClose={() => setShow(false)} show={show}>
                    </Modal>
                    <button class="star-button star3"><i class="fa fa-star"></i></button>
                    <p className='price'>10$</p>
                </div>
                <div className="column" style={{ "background-color": "#FFFFFF", "border-style": "solid", "border-color": "gray", "border-radius": "10px"}}>
                    <img src="https://bit.ly/3WEp8xL" alt="" className='music-cover'/>
                    <h2 className='text'>{data[4].name}</h2>
                    <p className='article'>Article: {data[5].article}</p>
                    <p className='color'>Colors: pink/green/white</p>
                    <p className='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
                    <button onClick={() => setShow(true)} className="show-button">Add to cart</button>
                    <Modal title="My Modal" onClose={() => setShow(false)} show={show}>
                    </Modal>
                    <button class="star-button star4"><i class="fa fa-star"></i></button> 
                    <p className='price'>10$</p>
                </div> */}
            </div>
        </div>
    )
}


НЕ могу понять, в чем сама проблема и как решить. Буду благодарен за помощь
  • Вопрос задан
  • 51 просмотр
Пригласить эксперта
Ответы на вопрос 1
@benner_jenya
Frontend-разработчик
Думаю проблема в использовании подобного селектора - document.querySelector("#star")
В React можно получить элемент используя useRef

const elementRef = useRef()
<div ref={elementRef}></div>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы