javascript - 无法在尚未使用事件侦听器挂载的组件上调用 setState

问题描述

我收到这个警告：

警告：无法在尚未安装的组件上调用 setState。这是一个无操作，但它可能表明您的应用程序中存在错误。相反，在导航栏组件中直接分配this.state或定义state = {};具有所需状态的类属性。

我创建了一个带有 NavMin 组件的 Navbar 组件，该组件仅在屏幕宽度为 11000 或更小时才呈现。我认为这与使用 componentDidMount 和 componentWillUnmount 有关，但我不确定如何正确使用它。我曾尝试在 NavMin 中使用 componentWillUnmount，但收到此错误：

无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 componentWillUnmount 方法中的所有订阅和异步任务。

这是两个组件：

import  React, { Component } from 'react';
import { Link } from 'react-router-dom';
import bars from './Images/bars.png';
import './NavMini.css'

class NavMini  extends Component {

    componentWillUnmount(){

    }
    constructor(props){
    super(props)
        this.state = {
            showMenu: false 
        }

        this.showMenu = this.showMenu.bind(this)
        this.closeMenu = this.closeMenu.bind(this)
    }

  showMenu(event){
       event.preventDefault();

       this.setState({
           showMenu: true
       },
       () => {
           document.addEventListener('click', this.closeMenu);
       });
   }

   closeMenu(){
       this.setState({
           showMenu: false 
       }, () => {
           document.removeEventListener('click', this.closeMenu);
       })
   }

    render(){
        return(
            <div id="Navigation-mini"> 
            <button  onClick={this.showMenu} className="button-nav">
                 <img className="Mini-nav" src={bars} alt="nav-icon"/>
            </button>
            {
            this.state.showMenu
                ? (
                <div className="Navmenu">
                    <Link className="NavLink-mini" to='/'>Home</Link>
                    <Link className="NavLink-mini" to='/About'>About</Link>
                    <Link className="NavLink-mini" to='/Blog'>Blog</Link>
                    <Link className="NavLink-mini" to='/Contact'>Contact</Link>
                </div>
                )
                : (
                    null
                )
            }

         </div>
        )
    }
}

export default NavMini

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Search from './Images/Search.png';
import Logo from './Images/Icon.png';
import NavMini from './NavMini'
import './NavBar.css';


class Navbar extends Component{
    constructor(props){
        super(props)

        let width = window.innerWidth;

        this.state = {
            show: false 
        }

        if(width < 1100){
            this.setState({
                show: true
            })
        }
    }

    render(){
    return (
        <div>
        <div id="Navigation">
            <div id="NavLogo">
                <Link to='/'><img id="CodeDestinee" src={Logo} alt="Logo" /></Link>
                    <h3 id="LogoName">Code <br/> Destinee</h3>
            </div>

            <div id="Navbar">
                <Link className="NavLink" to='/'>Home</Link>
                <Link className="NavLink" to='/About'>About</Link>
                <Link className="NavLink" to='/Blog'>Blog</Link>
                <Link className="NavLink" to='/Contact'>Contact</Link>
                <img className="NavLink" id="SearchIcon" src={Search} alt="Search-Icon" />
            </div>
        </div>

        { !this.state.show ? <NavMini /> : null } 
        </div>
    )
    }
}

export default Navbar

有人可以帮我理解我做错了什么吗？

标签： javascriptreactjs

javascript - 无法在尚未使用事件侦听器挂载的组件上调用 setState

问题描述

解决方案

推荐阅读