react的axios请求数据和模糊搜索

1. 安装 axios

npm i --save axios

引入import axios from 'axios'

2. 使用axios

import React, { Component } from 'react'
import axios from 'axios'
export default class Cinema extends Component {
    constructor() {
        super()
        //请求数据
        //axios 第三方的库，专门用于请求数据
        // axios.get("请求地址").then(res => {
        //     console.log(res.data)
        // }).catch(err => {
        //     console.error(err)
        // })
        /**axios 带url 和headers的请求 */
        axios({
            url: "请求地址",
            headers: {
                'X-Client-Info': '{}',
                'X-Host': ''
            }
        }).then(res => {
            console.log(res.data)
        }).catch(err => {
            console.error(err)
        })
    }
    //后面讲的声明周期函数 更适合发送ajax
    render() {
        return (
        <div>Cinema</div>
        )
  }
}

3.模糊查询filter方式

import React, { Component } from 'react'
import axios from 'axios'
export default class Cinema extends Component {
    constructor() {
        super()
        this.state = {
            cinemalist: [],
            bCinemalist:[]
        }
        /**axios 带url 和headers的请求 */
        axios({
            url: "请求地址",
            headers: {
                'X-Client-Info': '{}',
                'X-Host': ''
            }
        }).then(res => {
            console.log(res.data)
            this.setState({
                cinemalist: res.data.data.cinema,
                bCinemalist: res.data.data.cinema
            })
        }).catch(err => {
            console.error(err)
        })
    }
    //后面讲的声明周期函数 更适合发送ajax
    render() {
        return (
            <div>
                <input type="text" onInput={this.handleInput} />
                <ul>
                    {
                        this.state.cinemalist.map((item) =>
                            <li key='item.cinameId'>
                                <div>{item.name}</div>
                                <div>{item.address}</div>
                            </li>
                        )
                    }
                </ul>
            </div>
        )
    }
    handleInput = (event) => {
        var newList = this.state.bCinemalist.filter(item => item.name.toUpperCase().includes(event.target.value.toUpperCase()) || item.address.toUpperCase().includes(event.target.value.toUpperCase()))
        this.setState({ cinemalist: newList })
        //cinemalist 每次被重新覆盖，使用备份
    }
}

// filter

4.0 效果如下

image.png