语义-ui-反应：搜索结果不可见

Question

我一直在尝试让语义 ui 搜索结果出现，但对于我来说，搜索时我得到的是：

As you can see, the search results are not visible

我在我的 index.js 文件中导入了语义-ui-css：

import "semantic-ui-css/semantic.min.css";

我正在使用超级基础数据集进行测试：

const cities = [
    {
        key: 0,
        city: "New York City",
        usState: "New York"
    },
    {
        key: 1,
        city: "San Francisco",
        usState: "California"
    },
    {
        key: 2,
        city: "Chicago",
        usState: "Illinois"
    }
];

（此数组位于导入之后，但包含在上方以缩短代码部分）

并且正在使用文档中的 standard search：

import React from "react";
import { Search } from "semantic-ui-react";
import _ from "lodash";

class SearchBox extends React.Component {
    state = {
        isLoading: false,
        results: [],
        value: ""
    };

    componentWillMount() {
        this.resetComponent();
    }

    resetComponent = () =>
        this.setState({ isLoading: false, results: [], value: "" });

    handleSearchChange = (e, { value }) => {
        this.setState({ isLoading: true, value });

        setTimeout(() => {
            if (this.state.value.length < 1) this.resetComponent();

            const re = new RegExp(_.escapeRegExp(this.state.value), "i");
            const isMatch = result => re.test(result.city);

            this.setState({
                isLoading: false,
                results: _.filter(cities, isMatch)
            });
        }, 500);
    };

    handleResultSelect = (e, { result }) =>
        this.setState({ value: result.city });

    render() {
        const { isLoading, results, value } = this.state;
        return (
            <div>
                <Search
                    type="text"
                    size="big"
                    loading={isLoading}
                    results={results}
                    value={value}
                    onSearchChange={this.handleSearchChange}
                    onResultSelect={this.handleResultSelect}
                />
            </div>
        );
    }
}

export default SearchBox;

在编辑语义-ui-反应搜索示例时，我什至尝试使用我的数组作为数据，但由于某种原因，结果在那里也不可见。如何让搜索结果可见？

提前感谢您的任何评论或回答！

Answer 1

尝试检查 SearchResult 的正确属性，因为默认 SearchResult 组件应该使用具有以下键之一的对象：title, description, price, image.

见[https://react.semantic-ui.com/modules/search#search-example-standard][1]

语义-ui-反应：搜索结果不可见

Semantic-ui-react: Search results not visible

reactjs

semantic-ui-css

semantic-ui-react