Как history.goBack() вызывает ошибку Warning: Cannot update a component?

Question

[Quintis]

Доброго времени суток , history.goBack() в функциональном компоненте вызывает предупреждение :

index.js:1 Warning: Cannot update a component from inside the function body of a different component.
    in SearchPage (created by Context.Consumer)
    in Route (at App.js:23)
    in Switch (at App.js:21)
    in Router (created by HashRouter)
    in HashRouter (at App.js:19)
    in App (at src/index.js:9)
    in Provider (at src/index.js:9)

Компоненты:

import React from 'react'
import {useLocation } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import ProductList from '../components/ProductList';
import Filters from '../components/Filters';



export default function SearchPage() {
    
    const dispatch = useDispatch()

    let location = useLocation().pathname.split("/")[2].split("-")

    dispatch({type:'FILTERING-DATA',filters:[{gender:location[0]},{typeClothes:location[1]}]})

    return (
        <div className='search-page'>
            <Filters/>
            <ProductList/>
        </div>
    )
}

import React from 'react'
import { useLocation,useHistory} from 'react-router-dom'
import { useSelector } from 'react-redux';



export default function ProductPage() {
    let location =useLocation()
    let data = useSelector(state => state.listOfItems)
    console.log(data)


    let history = useHistory();
    function backButton(){
        history.goBack()
    }

    return (
        <div>
            <button onClick={()=>backButton()}>Back</button>
            {location.pathname.split("/")}
        </div>
    )
}

Как сделать так что б не было этого предупреждения и работала кнопка "Back"?
history.push() вызывает предупреждение тоже. Спасибо

Comments

[Mikhail Osher]

Так ошибка вообще в другом компоненте. Вы хоть прочитали? "in SearchPage (created by Context.Consumer)"

[Quintis]

Mikhail Osher,

import React from 'react'
import {useLocation } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import ProductList from '../components/ProductList';
import Filters from '../components/Filters';



export default function SearchPage() {
    
    const dispatch = useDispatch()

    let location = useLocation().pathname.split("/")[2].split("-")

    dispatch({type:'FILTERING-DATA',filters:[{gender:location[0]},{typeClothes:location[1]}]})

    return (
        <div className='search-page'>
            <Filters/>
            <ProductList/>
        </div>
    )
}

вот он

Answer 1

[Mikhail Osher]

Попробуйте что-то такое. А вообще, напрашивается, что gender и typeClothes должны быть заданы как route params

export default function SearchPage() {
  const dispatch = useDispatch()
  const location = useLocation()

  React.useEffect(() => {
    const [gender, typeClothes] = location.pathname.split("/")[2].split("-")

    dispatch({
      type:'FILTERING-DATA',
      filters: [{ gender }, { typeClothes }],
    })
  }, [location])

  return (
    <div className='search-page'>
      <Filters/>
      <ProductList/>
    </div>
  )
}

Comments

[Quintis]

TypeError: Cannot read property '0' of undefined

Не работает , а какая причина предупреждения