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

Question

[naddurkostia]

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

Код 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>
    )
}

НЕ могу понять, в чем сама проблема и как решить. Буду благодарен за помощь

Comments

[Kentavr16]

А что консоль разработчика говорит об ошибках?

[naddurkostia]

Kentavr16,

[Kentavr16]

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

И что вы хотели сделать при помощи этого фрагмента кода? Я так понимаю в реакте вы новичек, поэтому настоятельно рекомендую ознакомиться с оф. документацией.

[naddurkostia]

Kentavr16, В планах было сделать так, чтобы после нажатия на кнопку появился текст "CLICKED" и он сохранился бы в localStorage

[Kentavr16]

Ну в стеке ошибок пишут что проблема возникла на 13 строке файла item.jsx, потому что star это null.
Я бы посоветовал вам начать с начала - базового курса джава скрипт. Только после - реакт. Сам пытался начинать с реакта - это ошибка.

Answer 1

[Евгений Беннер]

Думаю проблема в использовании подобного селектора - document.querySelector("#star")
В React можно получить элемент используя useRef

const elementRef = useRef()
<div ref={elementRef}></div>