reactjs - 反应状态更新未定义并且不渲染

问题描述

我还在学习反应。从 redux 操作中检索数据并存储为 props。我的问题是执行过滤器函数后我的变量未定义。我想要做的是使用来自 redux 操作的数据，并显示这些变量。组件的状态结果是未定义的，视图上没有任何显示。有谁知道如何解决这一问题？

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

标签： reactjs

试试这个，我不知道它是否有用，但它对我有用

对于警告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
 }
```

我看到你的函数 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
 };

reactjs - 反应状态更新未定义并且不渲染

问题描述

解决方案

推荐阅读