Блог

Я пытаюсь сохранить значения в массив, но когда я «оставляю» компонент, значения сбрасываются так, как они были до того, как я добавил новые значения.

Моя цель — создать приложение Rooms, в котором я мог бы создать новую комнату с определенным именем, типом и цветом фона. Когда пользователь попадает в комнату, нажав на нее, он может выбрать из списка приборов то, что выбрал пользователь, и оно будет отображаться на странице.

Это работает хорошо, но когда я выхожу из комнаты и возвращаюсь, приборы сбрасываются. Как я могу это предотвратить?

Код компонента «Мои комнаты»:

 import React, {useState} from 'react'
import {Link} from 'react-router-dom'

export default function Rooms(props) {

    const [arr, setArr] = useState()
    const [disply, setDisply] = useState('none')
    const [applist, setAppList] = useState([])
    const [arrOfApp, setArrOfApp]= useState([
        ['lamp','boiler','sterio'],
        ['air','room','bed']
    ])

    let newAppliances = () =>{
        arrOfApp.map((item,index)=>{
            if(index===props.index){
                setArrOfApp(arrOfApp => [...arrOfApp,arr])
                setAppList(arrOfApp)
            }})
    }
    let disFunc = () =>{
        if(disply === 'none'){
            setDisply('block')
        }else{
            setDisply('none')
        }
    }
    let appliances = (e) =>{
        setArr(e.target.value) 
    }
  
    return (
        <div>
            <h1>Smart House</h1>
            <Link to='/' ><p>{props.index}</p></Link>
            <p>Room type: {props.type}</p>
            <p>Room name: {props.name}</p>

            <button onClick={disFunc}>Add appliances</button>

            <div style={{display: disply}}>

             <select onChange={appliances}>
                <option selected value=""></option>
                <option  value="Air-Conditioner">Air-Conditioner</option>
                <option value="boilermaker">boilermaker</option>
                <option value="stereo system">stereo system</option>
                <option value="lamp">lamp</option>
             </select>
             <button onClick={newAppliances}>Add</button>

             {arrOfApp.map((item)=>{
                return(
                    <span><br/>{item}<br/></span>
                )
            
            })}
                </div>
        </div>
    )
}
 

Код компонента My Appliances:

 import React, {useState} from 'react'

export default function Appliances(props) {

    const [applist, setAppList] = useState(props.app)

    return (
        <div>
            
            {applist.map((item) => {
                
                return(
                    <span>{item}</span>
                )
            })}
        </div>
    )
}