Question

我想在我的reactJS中实现一个搜索栏，该搜索栏在搜索栏中进行查询，并显示该查询中来自API的匹配资产，直到查询完成并呈现为止。

import React, { Component } from 'react';

interface ApiResponse {
    data: Asset[];
}

interface FetchDataExampleState
{
    query: string;
    assets: Asset[];
}

  // The interface for our Language model.
interface Asset 
{
    city: string;
    country: string;
    lane_number: string;
    location_uuid: string;
    pin: string;
    id: BigInt;
}

class Search extends Component<{}, FetchDataExampleState> {

    constructor(props) {
        super(props)
        this.state = {
            query: '',
            assets: []
        }
    }


    componentDidMount() {
        this.serachPeople(this.state.query);
    }

    onChange(e) {
        this.setState({ query: e.target.value }, () => {
            if (this.state.query && this.state.query.length > 1) {
                if (this.state.query.length % 2 === 0) {
                    this.serachPeople(this.state.query);
                }
            } else {
                this.serachPeople(this.state.query);
            }
        })
    }

    serachPeople(query) {
        const url = "/api/locations";

        if (query) {
            fetch(url, {
                method: 'GET'
            })
            .then(response => response.json() as Promise<ApiResponse>)
            .then(data => {
                console.log(data.data) 

// This is showing 0: {city: "bangalore", country: "india", id: 1, lane_number: "10", location_uuid: "1158", …}
//I have to search for location_uuid and show the row


        }


   }

    render() {
        return (
            <form>
                <input
                    type="text"
                    className="search-box"
                    placeholder="Search for..."
                    onChange={this.onChange.bind(this)}
                />
                {this.state.assets}
            </form>
        )
    }
}

export default Search;

如何渲染所有匹配的location_uuid直到最后一个。然后呈现最后一个的键和值。我是ReactJS的新手，并尝试了其他解决方案。有人可以帮我吗？

ReactJS：搜索栏实现

0 个答案: