Как избавиться от зависимости массива от состояния?

Question

У меня есть компонент Grid в который я передаю props(в этих пропсах есть массив). У меня есть состояние с этим массивом. Но, когда я сортирую массив(изменяю состояние), вместе с состоянием(items) изменяется и массив в пропсах(props.products).

Массив, который я передаю в props

const products =  [
{id:1, name: "product",brand: "apple",type:"компьютер", price: 134, img: "https://images.by.prom.st/173019328_w640_h640_kompyutery-proizvodstva-rb.jpg"},
{id:2, name: "abokys",brand: "lenovo",type:"ноутбук", price: 1, img: "https://cdn.alza.sk/ImgW.ashx?fd=FotoAddOrig&cd=NC051d4x0-03&i=1.jpg"},
{id:3, name: "abokys",brand: "apple",type:"ноутбук", price: 143, img: "https://cdn.alza.sk/ImgW.ashx?fd=FotoAddOrig&cd=NC051d4x0-03&i=1.jpg"},....]

компонент Grid

const Grid = React.forwardRef((props, ref) => {
const [fetching, setFetching] = useState(true)
const [total, setTotal] = useState(props.totalCount)
const [startPage, setStartPage] = useState(0)
const [produs, setProdus] = useState([])
const [items, setItems]=useState(props.products) //присваиваю массив состоянию

    useEffect(()=>{ // вывожу первые элементы
    if(fetching){
        setProdus([...produs, ...items.slice(startPage,total)])
        setStartPage(total)
        setTotal(total+total)
        setFetching(false )

    }
}, [fetching])


useEffect(()=>{
    document.addEventListener('scroll', scrollHadnler);

    return function(){
        document.removeEventListener('scroll', scrollHadnler)
    };
}, [])

const scrollHadnler=(e)=>{
    if(e.target.documentElement.scrollHeight-(e.target.documentElement.scrollTop+window.innerHeight)<100){
        setFetching(true)
    }
}

const sortByName = (sort) => { 
    setItems(items.sort((a,b) => a[sort].localeCompare(b[sort]))) // когда выполняется этот код меняется items и массив в props(т.е. products)
    setProdus([...items.slice(0,startPage)])
}

Как избавиться от этой зависимости?

Answer 1

Инициируйте копией массива, а не ссылкой

const [items, setItems]=useState([...props.products])

Состояние фильтра нужно возвращать в исходное состояние!!

useEffect(() => {
    if (noFilter) {
      setProdus([...items.slice(0, startPage)]);
      setNoFilter(!noFilter); // <-----
    }
}, [noFilter]);

БЛОГ НА HUSL

Как избавиться от зависимости массива от состояния?

Ответы (1 шт):