react state updated undefined and render nothing - reactjs

Question

I'm still learning react. The data is retrieved from the redux action and store as props. My problem is that my variable is undefined after a filter function executed. What I am trying to do is using the data from redux action, and display those variable. The state of the component turn out to be undefined and nothing display on view. Does anyone know how to fix this?
https://i.stack.imgur.com/3xyJn.png
1) Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
2) Uncaught TypeError: Cannot destructure 'this.state.currentTour' as it is undefined.
[
{
"_id": "12345",
"name": "I am first tour",
"description": "Iasofisajdaiosjdioasdmoias",
"imageUrl": "https://something1.jpg",
"dates": [
"2021-06-19T09:00:00.000Z",
"2021-07-20T09:00:00.000Z",
],
},
{
"_id": "67890",
"name": "I am second tour",
"description": "cvxbcvbcxbcvbcxb",
"imageUrl": "https://something2.jpg",
"dates": [
"2023-01-12T09:00:00.000Z",
"2023-04-22T01:00:00.000Z",
],
},
//.....rest data
]
import React, { Component } from 'react';
import './Tour.css';
import { connect } from 'react-redux';
class Tour extends Component {
constructor(props) {
super(props)
this.state = {
currentTour: {},
}
this.findSingletour = this.findSingletour.bind(this);
}
componentDidUpdate() {
const tourId = this.props.match.params._id;
let FilteredTour = this.findSingletour(tourId);
// console.log(FilteredTour); ----> undefined
if (FilteredTour !== this.state.currentTour) {
this.setState({
currentTour: FilteredTour
});
}
}
findSingletour = (tourId) => {
const notYetFilterTours = this.props.tours.tourState.data;
let filtered = [];
if (notYetFilterTours) {
filtered = notYetFilterTours.find((tour) => {
if (tour.id === tourId) return true;
return filtered; // ---> actual object get back { id: '...' , name: '...', ..... }
});
}
};
render() {
const {
name,
description,
imageUrl,
dates,
} = this.state.currentTour || {}; // ---> undefined
return (
<div>
<span>{name}</span>
<span>{description}</span>
<span>{imageUrl}</span>
<span>{dates[0]}</span>
</div>
)
}
}
const mapStateToProps = (state) => ({
tours: state.tourContainer,
});
export default connect(
mapStateToProps,
)(Tour);

Answer 1

Try this, I don't know does it helpful or not, but it's work for me
For warning Can't perform a React state update...
=> to not see this warning add code below, and add if(!this.mounted) return; before where ever you use this.setState
private mounted = false as boolean;
componentWillUnmount() {
this.mounted = false
}
componentWillMount() {
this.mounted = true
}
I see your function findSingletour() should return default value for it.
Example:
findSingletour = (tourId) => {
const notYetFilterTours = this.props.tours.tourState.data;
let filtered = [];
if (notYetFilterTours) {
filtered = notYetFilterTours.find((tour) => {
if (tour.id === tourId) return true;
return filtered; // ---> actual object get back { id: '...' , name: '...', ..... }
});
}
return filtered; // or something else cause I saw you had return bool or filtered
// If you do not return here result maybe is undefined
};