npm i pubsub-js

import React from 'react'

import PubSub from 'pubsub-js'

export default class UserSearch extends React.Component {

    state = {

        keyword: ''

    }

    render() {

        const { keyword, userList } = this.state

        return (

            <div>

                <h3>搜索用户</h3>

                <input type="text" placeholder="请输入搜索关键字" name="keyword" value={keyword} onChange={(e) => this.keywordInputOnChangeHandler(e)} />

                <input type="button" value="开始搜索" onClick={() => this.searchClickHandler()} />

            </div>

        )

    }

    keywordInputOnChangeHandler = (e) => {

        const keyword = e.target.value

        this.setState({ keyword })

    }

    searchClickHandler = () => {

        const { keyword } = this.state

        console.log(`keyword.trim()=${keyword.trim()}`)

        if (!keyword.trim()) return

        // publish a topic asynchronously

        PubSub.publish('search', keyword);

    }

}

import React from 'react'

import PubSub from 'pubsub-js'

import Axios from 'axios'

export default class UserList extends React.Component {

    state = {

        userList: []

    }

    componentDidMount() {

        var mySubscriber = (msg, data) => {

            console.log(msg, data);

            console.log(`订阅search，接收到消息：${data}`)

            this.doSearch(data)

        };

        console.log('UserList组件钩子函数componentDidMount。。。');

        PubSub.subscribe('search', mySubscriber)

    }

    doSearch = (keyword) => {

        Axios.get(`http://localhost:4000/react-db-crud/user/search?keyword=${keyword}`)

            .then(res => {

                if (res.data.code == 0) {

                    const userList = res.data.data

                    console.log(`userList=${JSON.stringify(userList)}`)

                    this.setState({ userList })

                }

            })

    }

    render() {

        return (

            <div>

                {

                    this.state.userList.map(user => <p>{user.id + "--" + user.name + "--" + user.age}</p>)

                }

            </div>

        )

    }

}