这是Panel的程式码

import React from "react";
// import {render} from "react-dom";
import AddInventory from "components/AddInventory";

class Panel extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            activeIndex: ''
        }
    }
    componentDidMount() {
        this.activePanel();
    }

    closePanel=()=>{
        this.setState({
            activeIndex : false
        })
    }

    activePanel = ()=>{
        this.setState({
            activeIndex : true
        })
    }

    render(){
        return(
            <div>
                {/*<button className={"button is-primary add-btn"} onClick={this.activePanel}>add</button>*/}
            <div className={this.state.activeIndex ? 'panel-wrapper active':'panel-wrapper'}>
                <div className={"over-layer"}>
                    <div className={"panel"}>
                        <div className={"head"}>
                            <span onClick={this.closePanel} className={"close"}>x</span>
                            <AddInventory></AddInventory>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        )
    }

}

export default Panel;

Products:

import React from "react";
import ToolBox from "components/ToolBox";
import Product from "components/Product";
import axios from 'components/axios'
import {CSSTransition , TransitionGroup} from 'react-transition-group'
import Panel from "components/Panel";

class Products extends React.Component{

    product =[];
    source =[];
    state ={
        product : [{
            id:'1',
            name:'Air Jordan1',
            tags:'45 colours',
            image:'images/1.jpg',
            price:'21000',
            status:'available'
        },
            {
                id:'2',
                name:'Nike Pual George PG 3',
                tags:'45 colours',
                image:'images/2.jpg',
                price:'11000',
                status:'available'
            },
            {
                id:'3',
                name:'Jordan Why Not Zer0.2',
                tags:'10 colours',
                image:'images/3.jpg',
                price:'15000',
                status:'unavailable'
            },
        ]
    }

    componentDidMount() {
        // fetch('http://localhost:3003/products').then(response => response.json()).then( data=>{
        //     console.log(data)
        //     this.setState({
        //         product : data
        //     })
        // })
        axios.get('/products').then(response => {
            this.setState( {
                product : response.data,
                source : response.data
            })
        })
    }

    search = text=>{
        //1.get a new array from product
        let _product = [...this.state.source]

        //2.filter the array
        let res = _product.filter((element)=>{
            return element.name.toLowerCase().includes(text.toLowerCase())
        })

        //set state
        this.setState({
            product : res
        })

    }
    add = ()=>{
       let panel =  new Panel(this.props)
        panel.activePanel()
    }

    // add =()=>{
    //     panel.setState({
    //         activeIndex : true
    //     })
    // }

    render() {
        return(
           <div>

               <ToolBox  search={this.search}/>
            <div className={'products'}>
                <div className="columns is-multiline is-desktop">
                    <TransitionGroup component={null}>

                    {
                        this.state.product.map(p=>{
                            return (
                                <CSSTransition
                                    timeout={400}
                                    classNames="product-fade"
                                    key={p.id}
                                >
                                <div className="column is-3" key={p.id}>
                                <Product product={p}/>
                                </div>
                                </CSSTransition>
                            )
                        })
                    }</TransitionGroup>
                    {/*<div className="column is-3">*/}
                    {/*    <Product/>*/}
                    {/*</div>*/}
                    {/*<div className="column is-3">*/}
                    {/*    <Product/>*/}
                    {/*</div>*/}
                </div>
                <button className={"button is-primary add-btn"} onClick={this.add}></button>
            </div>
           </div>
        )
    }
}

export default Products;

我尝试在产品中使用activePanel（），但它给了我：警告：无法在尚未装入的组件上调用setState。这是一个无操作，但可能表示应用程序中存在错误。请改为直接将. state赋值给此组件或定义astate = {};我尝试初始化一个新的panel（），但它仍然给我同样的错误。