Radio w react zaczyna działać poprawnie dopiero po podwójnym kliknięciu

Question

<section className='categories' >
            <div className='radio' key={'all'} onChange={handleCategory}>
                <label><input type='radio'name='category' value='*' checked/>All</label>   
            </div>

            {categories.map((item) =>
            <div className='radio' key={item} onChange={handleCategory}>
                <label><input type='radio' name='category' value={`${item}`}/>{item}</label>
            </div>
           )}
</section>

Cześć! Zrobiłem przy pomocy zaznaczajek w react taką listę kategorii jakiś rzeczy. Ustawiłem domyślną wartość all (wszystkie), by była aktywowana po włączeniu strony. Później z tablicy zawierającej inne kategorie mapuję je. Sam kod spełnia swoją funkcję i po wciśnięciu jednej zaznaczajki stan się zmienia i wszystko wykonuje tak jak powinno. Problem polega na tym, że ta kulka/kropka się nie zmienia. Dopiero po ponownym naciśnięciu następuje ta zmiana. Co więcej, gdy później zaznaczę sobie inną kategorię najpierw ustawi mi się domyślna wartość "all". Czy mogę to jakoś zmienić? Zależy mi tylko by po włączeniu strony ustawiało się all

 

Comments

Pokaż implementację funkcji handleCategory.

P.S. To przypisanie:

value={`${item}`}

można skrócić do:

value={item}

 

---

const handleCategory = (event) => {
        setSelectedCategory(event.target.value);
    }

Funkcja jedynie ustawia wartość w pliku context.jsx, która domyślnie jest ustawiona na all

    const [selectedCategory, setSelectedCategory] = useState('*');

Dodaję też cały plik odpowiedzialny za te radia

import React, {useState} from 'react';
import { useGlobalContext } from '../context';

const Categories = () => {
    const {products, setSelectedCategory} = useGlobalContext();
    const categories = [];

    const getCategories = () => {
        products.map((item) =>
        {const {category} = item
        if(categories.includes(category)) return;

        categories.push(category);
        })
        return categories;
    }

    const handleCategory = (event) => {
        setSelectedCategory(event.target.value);
    }

    getCategories();
    return (
        <section className='categories' >
            <div className='radio' key={'all'} onChange={handleCategory}>
                <label><input type='radio'name='category' value='*' checked/>All</label>   
            </div>

            {categories.map((item) =>
            <div className='radio' key={item} onChange={handleCategory}>
                <label><input type='radio' name='category' value={`${item}`}/>{item}</label>
            </div>
           )}
        </section>
    );
};

export default Categories;

 

---

Z tego co widzę, to do setSelectedCategory przekazujesz po prostu wartość z inputa, a czy rozgraniczasz, która wartość ma należeć do którego z nich? Gdzie odczytujesz selectedCategory?

---

W jeszcze innym componencie mapuję jakieś tam obiekty które mają {category: "jakiś tekst"}. Funkcja w czasie mapowania wypluwa tylko te obiekty których category === selectedCategory lub zwróci wszystkie jeżeli selectedCategory === '*' (Linia 22)

 

import React from 'react';
import { useGlobalContext } from '../context';
import Categories from './Categories';

function Products() {
    const { products, loading, showModal, selectedCategory} = useGlobalContext();

    const showModalHandle = (id) => {
       showModal(id);
    }

    return (
        <div className={'products'}>
            <div className='products-container'>
            <Categories/>
            { loading ? 
                <p>Loading...</p>
                :  
                products.map((product) => {
                const {id, image, title, price, category} = product;

                if(selectedCategory !== '*' && category !== selectedCategory) return;

                return ( 
                <div key={id} className={'product'} onClick={() =>showModalHandle(id)}> 
                    <img alt='' src={image} />
                    <div className='description'>
                    <p> {title} </p> 
                    <h1 className='price'>{price}€</h1>
                    </div>
                </div> )
            })}
            </div>
        </div>
    );
}

export default Products;

 

---

Możesz udostępnić to przez sandbox? Będzie łatwiej przetestować.

Widzę, że funkcja getCategories i w ogóle sposób użycia związanej z nią tablicy w komponencie Categories jest dziwny - mapujesz tablicę (jednocześnie ją mutując), bez bezpośredniego zwracania wyniku (a samo wywołanie jest w komponencie, bez przekazania wyniku gdziekolwiek) ani bez aktualizacji stanu. Na moje oko, tablica categories jest cały czas pusta, więc nic się z niej nie renderuje.

---

@Dobdo, a onChange nie powinno być zamiast w div to w input?

---

@ScriptyChris, Tablica nie jest pusta bo na stronie wypluwa mi nazwy kategorii i ogólnie wszystko działa jak powinno tylko jest taki dziwny bug, że to niebieskie kółko zaznacza się przy danym checkboxie dopiero po naciśnięciu. Postaram się udostępnić to jak mówiłeś wkrótce.

Póki co dodam, że znalazłem wcześniej wątek, w którym ktoś opisuje ten sam problem. Ze względu na typ programu ktoś kazał mu wywalić opcję checked więc nie poznałem rozwiązania. U mnie bez tej opcji też wszystko działa: https://forum.pasja-informatyki.pl/547196/input-radio-w-react

---

@sefir Początkowo tak było. Po prostu szukałem potencjalnego rozwiązania, ale niezależnie gdzie to jest i tak nic mi to nie daje