• Unmount component - что это такое?

    @Vladislav6 Автор вопроса
    вот в этом и была проблема, я прочитал что это относилось к классовым компонентам, но я пишу на фулл функциональных, поэтому и возник вопрос. Возможно я что-то не так понял в плане возникновения ошибки.

    В любом случае спасибо за ответ
    Написано
  • Как получить все элементы массива с сервера?

    @Vladislav6 Автор вопроса
    да, два запроса с установкой оффсет, спасибо, разобрался)
    Написано
  • Как получить все элементы массива с сервера?

    @Vladislav6 Автор вопроса
    я понял это, хорошо, мне нужно на каждый оффсет сделать отдельный запрос? или это можно сделать все в рамках одного запроса к серверу?
    Написано
  • Как получить все элементы массива с сервера?

    @Vladislav6 Автор вопроса
    я догадываюсь, что мне нужно поле next, однако я не могу получить доступ к нему, поле data, через которое я запрашиваю доступ к этому плейлисту - undefined
    Написано
  • Как реализовать передачу state при переходе на новую страницу?

    @Vladislav6 Автор вопроса
    вроде как разобрался, стейт передается со страницы на страницу, спасибо за подсказку
    Написано
  • Как реализовать передачу state при переходе на новую страницу?

    @Vladislav6 Автор вопроса
    TRNER, можно какой-то простецкий пример, а то что-то тяжело до меня пока это доходит
    Написано
  • Как реализовать передачу state при переходе на новую страницу?

    @Vladislav6 Автор вопроса
    ну пока что у меня не сильно и большие данные тут и не сильно сложные по логике приложения делаю, понимаю, что потом в любом случае придется изучать редакс, но пока что вроде хватало и обычного стейта куда я вносил инфу динамически.

    В любом случае, спасибо за ссыль, сохраню себе, а пока что буду пытаться без редакса что-то придумывать)
    Написано
  • Как реализовать передачу state при переходе на новую страницу?

    @Vladislav6 Автор вопроса
    не понимаю что делать с location, через link to object все понятно, а куда пихать location - не понимаю
    Написано
  • Как реализовать передачу state при переходе на новую страницу?

    @Vladislav6 Автор вопроса
    Хорошо, спасибо, попробую такой вариант
    Написано
  • Как отсортировать при помощи Select?

    @Vladislav6 Автор вопроса
    благодарю, это и правда сработало, только осталось понять, что тут происходит, очень уж мудрено получилось, думал это реализуется многим проще)
    Написано
  • Как отсортировать при помощи Select?

    @Vladislav6 Автор вопроса
    Alex Ozerov, метод sort применяется на стейте, в котором лежит массив с данными "const [filtered, setFiltered] = useState([])" - вот этот стейт

    полный код компонента ниже (я убрал тут все свои попытки с методом sort):


    import React, { useEffect, useState } from 'react';
    import './GoodsPage.css';
    import HeaderLogo from '../header-logo/HeaderLogo';
    import axios from 'axios';
    
    export default function GoodsPage() {
    
            const [goods, setGoods] = useState([]);
            useEffect( () => {
                axios.get('тут адрес базы данных')
                    .then(res =>   setGoods(res.data))
                    .catch(err => console.log(err))
            }, []);
    
            const [filtered, setFiltered] = useState([]);
                    
            function btnHandlers(e) {
                let target = e.target.value;
    
                if (target === 'Все') {
                    setFiltered(goods);
                    
                } else if (target === 'Новинки') {
                    setFiltered(goods.filter(item => {
                        return item.new
                    })) 
                    
                } else if (target === 'Мясные') {
                    setFiltered(goods.filter(item => {
                        return item.meat 
                    })) 
                } else if (target === 'Острые') {
                    setFiltered(goods.filter(item => {
                        return item.spicy
                    })) 
                } else if (target === 'Напитки') {
                    setFiltered(goods.filter(item => {
                        return item.drink
                    })) 
                } else if (target === 'Закуски') {
                    setFiltered(goods.filter(item => {
                        return item.snacks
                    })) 
                }
    
            }
                    
    
            useEffect( () => {
                setFiltered(goods)
            }, [goods])
    
                return (
                <>
                <HeaderLogo />
                    <div className="goods_page-wrapper">
                    
                      <div className="goods-container">
    
                        <div className="goods-filters-wrapper">
    
                            <div className="goods_filter-types">
                                <button value="Все" className="filter-btn" onClick={btnHandlers}>Все</button>
                                <button value="Новинки" className="filter-btn" onClick={btnHandlers}>Новинки</button>
                                <button value="Мясные" className="filter-btn" onClick={btnHandlers}>Мясные</button>
                                <button value="Острые" className="filter-btn" onClick={btnHandlers}>Острые</button>
                                <button value="Напитки" className="filter-btn" onClick={btnHandlers}>Напитки</button>
                                <button value="Закуски" className="filter-btn" onClick={btnHandlers}>Закуски</button>
                            </div>
    
                            <div className="goods_filter-sort">
                                <span className="icon-wrapper">
                                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>
                                </span>
                                
                                <p className="sort-title">Сортировать по: </p>
                                
                                <select className="sort-select" > 
                                    <option value="Популярность" className="option-item">Популярности</option>
                                    <option value="Цена" className="option-item">По цене</option>
                                    <option value="Алфавит" className="option-item">По алфавиту</option>
                                </select>
                            </div>
                        
                    </div> 
    
                        <div className="cards-wrapper"> ... (тут перебор карточек)
    
                </div>
            </div>
            
        </>)}
    Написано
  • Как внести данные в модальные окна?

    @Vladislav6 Автор вопроса
    благодарю, это сработало, буду сейчас изучать детально код Ваш

    При этом это именно то, что я и хотел донести в вопросе. Еще раз спасибо
    Написано
  • В чем отличия подходов в React?

    @Vladislav6 Автор вопроса
    ReactLover, понял, спасибо большое, теперь стало немного понятнее)
    Написано
  • В чем отличия подходов в React?

    @Vladislav6 Автор вопроса
    ReactLover, ну такой подход тоже имеет место быть, я просто хотел изначально понять, что это (классы и функции) и правильно ли я в целом понял что это немного разные вещи. Если подытожить, то можно сделать упор на функциональные компоненты, но, классовые тоже нужно знать.

    Хотя возникает вопрос у меня теперь, как часто используются классовые компоненты? в наше время (опять же, мне кажется этот вопрос немного не корректен, ввиду неопытности моей)
    Написано
  • В чем отличия подходов в React?

    @Vladislav6 Автор вопроса
    ReactLover, если честно я даже не знаю что это, пока что) так что пока что мне сказать нечего
    Написано
  • В чем отличия подходов в React?

    @Vladislav6 Автор вопроса
    Михаил, ну не знаю конечно, лично мне удобно прописать useState в начале страницы и исходный state, ну и по необходимости, менять его. Единственное что действительно может усложнить, это если Вы меняете state, там нужно создать дубликат исходного state, и уже его менять, но опять же, это 2 строчки кода.
    Написано
  • В чем отличия подходов в React?

    @Vladislav6 Автор вопроса
    NarkoMan01, благодарю за помощь)
    Написано
  • В чем отличия подходов в React?

    @Vladislav6 Автор вопроса
    т.е. если я правильно понял, классы это уже устаревший варианта создания компонентов и поэтому придумали функциональный подход?
    Написано
  • В чем отличие input от textarea?

    @Vladislav6 Автор вопроса
    Алексей Уколов, ага, я понял, ну полностью содержимое сразу все удалить я знаю как, сейчас только буду думать как по одному символу убрать, спасибо еще раз
    Написано
  • В чем отличие input от textarea?

    @Vladislav6 Автор вопроса
    Алексей Уколов, Тут появился обратный вопрос, а как удалить предыдущее значение из инпута(так же через отдельную кнопку)? В textarea я просто через slice() делал, а тут такое не прокатит же
    Написано