我有Tab导航器,用于处理自身和其他两个同级组件的数据更改.

主要父组件根据http帖子请求中的请求正文参数,根据三种情感进行数据获取和处理的组件：正,负和中性.

第二个父组件,用于存储来自主父组件的所有正数据,负数据和中性数据.

然后是三个子组件：表一和选项卡导航.

选项卡导航具有三个三个选项卡,即：正,负和中性.

默认情况下,在首次加载页面时(默认情况下)(不单击正选项卡按钮),该页面将获取正数据并将其显示在所有三个子组件中.然后点击“否定”标签,它将在所有三个子组件中显示否定数据,即表一和标签导航的否定标签下.对于“中性标签”也遵循相同的原则.

简而言之,Tab导航根据其活动状态处理其自身和同级组件的数据呈现,并从父组件获取该数据.

我尝试将活动事件从选项卡导航传递到其上层容器,但似乎无法正常工作.

Tab.js

import React, { Component } from 'react';


export default class Tab extends Component 
{
    constructor(props) 
    {
        super(props);
        this.state = 
        {   
            active: 'positive',

        }
    }



    toggle = (event) => 
    { 

        this.setState({
          active: event
        })

        this.props.sendEvent(this.state.active);
 }

    get_tab_content =()=>
    {
        switch(this.state.active)
        { 
            case 'positive':
                return <div><SomeDataComponent1 positiveprops={} /></div>; 
            case 'negative':
                return <div><SomeDataComponent2  negativeprops={}/></div>;
            case 'neutral':
                return <div><SomeDataComponent3  neutralprops={} /></div>;
            default : 
        }
    }

  render() {

    const tabStyles = {
        display: 'flex',
        justifyContent: 'center',
        listStyleType: 'none', 
        cursor: 'pointer', 
        width: '100px',
        padding: 5,
        margin: 4,
        fontSize: 20,
        color: 'green'
      }


    const tabStyles2 = {
        display: 'flex',
        justifyContent: 'center',
        listStyleType: 'none', 
        cursor: 'pointer', 
        width: '100px',
        padding: 5,
        margin: 4,
        fontSize: 20,
        color: 'red'
      }


      const tabStyles3 = {
        display: 'flex',
        justifyContent: 'center',
        listStyleType: 'none', 
        cursor: 'pointer', 
        width: '100px',
        padding: 5,
        margin: 4,
        fontSize: 20,
        color: 'yellow'
      }


    const linkStyles = {
      display: 'flex',
      justifyContent: 'center',
      color: '#000',
      listStyleType: 'none'
    }

    const divStyle = {
      border: '1px solid #34baa2',
        width: '450px'
    }

    const box = this.get_tab_content()

    return (
      <div style={divStyle} >
        <ul style={linkStyles}>
          <li style={tabStyles} onClick={function(){this.toggle('positive')}.bind(this)}>Positive</li>
          <li style={tabStyles2} onClick={function(){this.toggle('negative')}.bind(this)}>Negative</li>
          <li style={tabStyles3} onClick={function(){this.toggle('neutral')}.bind(this)}>Neutral</li>
        </ul>
        <div>
            {box}
        </div>
      </div>
    );
  }

 }

第二父Component.js

import React,{Component} from 'react';
import Tab from '../tab/tab';

import MentionTable from '../table/table';


class DataCharts extends Component{
constructor(props){
    super(props);

    this.state = {
        childEvent: ''
    }
}


getEvent = (childevent) => {
    this.setState({
        childEvent: childevent
    });

    console.log(this.state.childEvent)
}


    render(){
        const {positivetable,positivewords,  negativetable,  negativewords, neutraltable, neutralwords } = this.props;


        return(

                <div style={{display:'flex', flexDirection: 'row'}}>
                        <Table />

                        <Tab sendEvent={this.getEvent}/>
                </div> 

        )
    }
}


export default DataCharts;

解决方法:

代码的问题是以下几行：

  toggle = event => {
    this.setState({
      active: event
    });

    this.props.sendEvent(this.state.active);
  };

setState是异步的,因此您向sendEvent发送了意外状态.

  toggle = event => {
    this.setState(prevState => {
      console.log('prevState', prevState);
      console.log(event);
      this.props.sendEvent(event);
      return { active: event };
    });
  };