Я новичок, чтобы реагировать, и я разрабатываю интерфейс для REST-API.
Мой интерфейс для REST-API состоит из 5 сайтов (компонентов), которые маршрутизируются с react-router-dom.
Каждый раз, когда я захожу на сайт, ComponentDidLoad отправляет действие, которое, в свою очередь, вызывает API в моем редукторе.
export function getData(pURL, ...pParams){
return (dispatch) => {
axios.get(pURL, {pParams})
.then(result => {
dispatch(getDataSuccess(result.data))
})
.catch(error => {
dispatch(getDataFailure(error))
})
}
}
Один из моих главных сайтов выглядит следующим образом
class Overview extends Component {
componentDidMount(){
this.props.getData(MyURLHere);
}
render(){
return(
<div>
{this.props.hasError ? "Error while pulling data from server " : ""}
{/* isLoading comes from Store. true = API-Call in Progress */}
{this.props.isLoading ? "Loading Data from server" : this.buildTable()}
</div>
)
}
}
let mapStateToProps = state => {
hasError: state.api.hasError,
isLoading: state.api.isLoading,
companies: state.api.fetched
}
let mapDispatchToProps = {
//getData()
}
export default connect(mapStateToProps, mapDispatchToProps)(Overview);
state.api.fetched - это моя переменная хранилища, в которой я храню данные из каждого вызова API.
this.buildTable() просто отображает данные и создает простую HTML-таблицу
Моя проблема в том, что я получил переменную состояния магазина isLoading, установленную в true в моем initialState.
Но когда я перехожу на другой сайт, а затем обратно на этот, он автоматическиполучает данные из state.api.fetched и пытается this.buildTable() с ним, потому что isLoading не true.Это заканчивается ошибкой «не является функцией», потому что в ней все еще есть старые, извлеченные данные с другого сайта.
Мое решение состояло бы в том, чтобы всегда вызывать функцию при выходе из компонента (сайта), который сбрасываетсямой магазин на initialState
const initialStateAPI = {
isLoading: true
}
или прямо на isLoading, чтобы мой сайт не пытался использовать данные из старых выборок.
Есть ли способСделай так?Я надеюсь, что я предоставил достаточно информации, если нет, пожалуйста, дайте мне знать.