@Quintis

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

Доброго времени суток , 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() вызывает предупреждение тоже. Спасибо
  • Вопрос задан
  • 80 просмотров
Пригласить эксперта
Ответы на вопрос 1
miraage
@miraage
dev
Попробуйте что-то такое. А вообще, напрашивается, что 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>
  )
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
02 апр. 2020, в 21:27
600 руб./за проект
02 апр. 2020, в 21:15
3000 руб./за проект
02 апр. 2020, в 21:11
8500 руб./за проект