import React, { Component } from 'react'
import axios from 'axios'
import {$on}from "../utill/bus"
export class Button extends Component {
    state = {
        arr: []
    }
    componentDidMount() {
        axios.get("/render").then((res) => {
            this.setState({
                arr: res.data
            })
        })
        $on("aaa",(data)=>{
            let brr=this.state.arr.filter((item)=>{
                return  item.name.includes(data)
            })
            this.setState({
                arr:brr
            })
        })
    }
    render() {
        let {arr}=this.state
        return (
            <div>
                我是button
                <table border="1" >
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>年龄</th>
                        </tr>

                    </thead>
                    <tbody>
                        {arr&&arr.length?arr.map((item,index) => {
                            return <tr key={index}>
                                <td>{item.id}</td>
                                <td>{item.name}</td>
                                <td>{item.age}</td>
                                <td>{item.sex}</td>
                            </tr>
                        }):null}
                    </tbody>
                </table>
            </div>
        )
    }
}

export default Button