Блог

Главная - Вопросы по программированию - Как перезагрузить условный рендеринг в react?

Как перезагрузить условный рендеринг в react?

#javascript #reactjs

#javascript #reactjs

Вопрос:

     <div className="confessions-container">
        <div className="search-confession">
            <form className="search-form">
                <div className="form-control">
                        <label htmlFor="categories">Category</label>
                        <select name="categories" ref={refCategory} onChange={() => setCategory(refCategory.current.value)}>

                            <option value="">Select Category</option>
                            {categories.map((category) => {
                                return (
                                    <option value={category}>{category}</option>
                                )
                            })}
                        </select>
                    </div>
                    <div className="form-control search">
                        <input type="text" name="title" ref={refSearch}/>
                        <button className="btn-search">Search</button>
                    </div>
            </form>
        </div>


        {category ? <ConfessionByCategory category={category} /> :  <AllConfessions />}
        
        

    </div>

если я меняю категорию (из выбора) в первый раз, выполняется условный рендеринг. но если я перейду в другую категорию, она не будет повторяться

Комментарии:

1. Можете ли вы добавить свой onChangeCategory код обработчика?

2. onChangeCategory имеет setCategory(refCategory.current.value)

3. есть ли какая-либо причина, по которой вы используете ссылки вместо того, чтобы просто выполнять значение события? onChange={(e) => setCategory(e.target.value)}

4. нет, но я уже пробовал этот способ, но он работает не так, как я хочу

5. можете ли вы показать свой полный компонент, потому что кажется, что в этом фрагменте нет ничего плохого