Блог

Я все еще изучаю react. Данные извлекаются из действия redux и сохраняются как реквизиты. Моя проблема в том, что моя переменная не определена после выполнения функции фильтра. То, что я пытаюсь сделать, это использовать данные из redux action и отображать эти переменные. Состояние компонента оказывается неопределенным, и в представлении ничего не отображается. Кто-нибудь знает, как это исправить?

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);
 

Попробуйте это, я не знаю, полезно это или нет, но это работает для меня

1. Для предупреждения Can't perform a React state update... => чтобы не видеть это предупреждение, добавьте код ниже и добавьте if(!this.mounted) return; перед тем, где вы когда-либо использовали this.setState

     private mounted = false as boolean;
    componentWillUnmount() {
        this.mounted = false
    }
    componentWillMount() {
        this.mounted = true
    }
    

2. Я вижу, что ваша функция findSingletour() должна возвращать для нее значение по умолчанию.
   Пример:

     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
    };