Aktualizacja wybranych rekordów tablicy

delform_17

2024-08-17T20:12:46+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 100

0

Witam

Mam problem z napisaniem stosunkowo prostej funkcji, który ma za zadanie aktualizować jeden wybrany parametr tablicy obiektów, ale robić to pojedynczo po każdym użyciu przycisku. Każdy rekord będzie miał inny identyfikator więc chyba będę musiał zrobic to licznikiem.
Funkcja ma aktualizować rekordy np 2 drugi od początku lub od końca tablicy. Finalnie chce z tego zrobić mały system rezerwacji miejsc np w środku transportu w oparciu o aktualizacje statusu wybranego miejsca.

Obecnie staram się przebić przez mniejszy problem:

Kopiuj

function UpdateList(){

    const initialArray = [
        {name: 'David',eyeColor: 'blue', width: 190, weight: 80},
        {name: 'Branda',eyeColor: 'green', width: 170, weight: 60}
    ];

       let index = 1;
       let newElement = "Marry";
       
       const [box, setBox] = useState(initialArray); 

       const updateElement = () => {
        
        if(box.eyeColor === "red")
        {
            setBox({ ...box, eyeColor: 'darkblue' });
            console.log(box.eyeColor);
        }
        
      }
      
      return(
        <div>
            <button onClick={updateElement}>Update</button>
            <p>{box.name}  </p>
            <p>{box.eyeColor}  </p>
            <p>{box.height}  </p>
           
        </div>
        
    )
}


const execute = ReactDOM.createRoot(document.getElementById(('root')));
execute.render(<UpdateList />)

szatkus1

2024-08-17T20:39:28+02:00

Rejestracja: dni
Ostatnio: dni

1

Póki co to ten kod nie ma prawa działać. Nigdzie nie iterujesz po elementach tablicy tylko traktujesz ją jak jeden element. Zgaduję, że wszędzie są undefined.

BTW TypeScript by tutaj pluł błędami aż miło.

delform_17

2024-08-19T20:10:09+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 100

0

Jeśli użyłbym mapa przeszedłby mi przez całą tablice, a nie zaktualizował pojedynczy element i taka np po każdym kliknięciu. Finalnie co kilka sek ma aktualizować każdy kolejny element tablicy aż zostanie np jej połowa.

delform_17

2024-09-03T18:56:52+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 100

0

Udało mi się poprawić to w taki sposób, ale niestety bardziej uzyskałem efekt sortowania niżeli modyfikacja tablicy :

Kopiuj

let randomNum = null;
let maxLOfArr = null;


const listsOfPassangersSits = [
        
    {id: 156,name: "Place1",PlaceID: 1915,},
    {id: 237,name: "Place2",PlaceID: 1920,},
    {id: 397,name: "Place3",PlaceID: 1925,},
    {id: 425,name: "Place4",PlaceID: 1930,},
    {id: 158,name: "Place5",PlaceID: 1935,},
    {id: 249,name: "Place6",PlaceID: 1940,},
    {id: 321,name: "Place7",PlaceID: 1945,},
    {id: 430,name: "Place8",PlaceID: 1950,},
];

maxLOfArr = listsOfPassangersSits.length;

function UpdateListOfPassangers_And_FindFreePlaces(){

    const [myRow, setMyRow] = useState(listsOfPassangersSits);

    function setRandomNumber(){
        randomNum = Math.floor(Math.random() * 5);
        
    }
    
    function UpdateSomeRow(){
        let countTheRecord = 0;
            const countAndUpdate = myRow.map(actualRow => {
                countTheRecord = countTheRecord + 1;
                //console.log(countTheRecord);
                if(countTheRecord === maxLOfArr){
                    console.log("Found end of array");
                if(!isNaN(actualRow.PlaceID)){              
                    //if(actualRow.PlaceID != 0){    
                    setRandomNumber();
                    console.log("Place is enable");
                    
                    return {...actualRow, PlaceID : ''}
                }
                
            }
            return actualRow;
        });
        maxLOfArr--;
        //maxLOfArr =  maxLOfArr - randomNum; 
        
        setMyRow(countAndUpdate);
        console.log(maxLOfArr);
    }

    function UpdateListOPassangers(){
        useEffect(() => {
            const intervalSession = setInterval(() => {
            UpdateSomeRow();
        
            }, 2000);
        
            //return () => clearInterval(intervalSession); 
        },[]);
        
    }

    UpdateListOPassangers();

    function CheckFreePlaces(){}

    return(
        <div>
           <button onClick={CheckFreePlaces}>Check Free Place</button>
            <ul>
            {
                myRow.map((row, index) => (
                    <li key={index}>
                        <span> Name : {row.name}</span>
                        <span> PlaceID : {row.PlaceID}</span>
                    </li>
                    
                ))
            }
            </ul>
        </div>
    )

}

const execute = ReactDOM.createRoot(document.getElementById(('root')));
execute.render(<UpdateListOfPassangers_And_FindFreePlaces />)

Używają przycisku aktualizuje bez problemy w takim automacie niestety efekt jest odwrotny . Albo to kwestia interwału albo nie do końca poprawnej konstrukcji aktualizacji tablicy.