在搜索组件React,Semantic-UI-React中呈现搜索结果问题

时间:2019-11-22 18:37:23

标签: javascript reactjs semantic-ui semantic-ui-react

我正在尝试将自定义渲染用于搜索框。我正在使用语义UI反应。

以下是render方法的代码段:

  render() {
    const { isLoading, value, results } = this.state

    const resultRenderer = ({ clientName }) => (
            <div>               
                <p>{clientName}</p>               
            </div>
        );

    resultRenderer.propTypes = {
        clientName: PropTypes.string
    }

    return (     
          <Search            
            loading={isLoading}
            onResultSelect={this.handleResultSelect}
            onSearchChange={_.debounce(this.handleSearchChange, 10, {loading: true})}
            results={this.state.results}
            value={value}
            resultRenderer={this.resultRenderer}
            {...this.props}
          />                      
    )
  }
}

下面的代码段是handleSearchChange方法:

handleSearchChange = (e, { value }) => {

    var resultsArray = []
     this.setState({ isLoading: true, value })

                api.autoCompleteClient(value).then(res => {

                var tempArray = res.data.data.hits.hits
                var autoResult = []


                for(var i = 0; i < tempArray.length; i++)
                {

                    resultsArray.push(tempArray[i]._source.clientName)
                }


                }).catch(error => {

                console.log('Some error got while performing autocomplete for clients ', error)
                })


    setTimeout(() => {
      if (this.state.value.length < 1) return this.setState(initialState)
      this.setState({
        isLoading: false,
        results: resultsArray,
      })
    }, 300)
  }

打印后的渲染结果可以在以下屏幕截图中看到:

enter image description here

但是,搜索栏中的结果为空,并且出现了以下错误,如下所示:

enter image description here

如果在输出渲染器中放置打印语句,则会得到以下结果:

enter image description here

任何关于我可能做错事情的想法。所有帮助将不胜感激!

3 个答案:

答案 0 :(得分:1)

我认为这是罪魁祸首:

resultsArray.push(tempArray[i]._source.clientName)

不确定您的数据是什么样子,但是如果您有三个空结果并且有三个结果,那么我猜这不是在获取正确的属性。

似乎您需要在api.autoCompleteClient的.then()回调中设置状态。这样,您就知道数据已准备就绪,而不仅仅是等待300毫秒。

为了简洁/显示意图,我还建议使用Array.map()代替for循环。

使用Chrome中的React Devtools扩展程序可以让您实时检查组件的状态/属性。

关于前两个控制台警告,我只看一下SemanticUI文档,看看该组件的功能是什么,看起来好像并没有实际使用两个。

最后一个警告仅表示在映射多个组件时需要一个关键道具,以帮助更有效地渲染它们。因此只需key = {someUniqueValue}。

编辑:试试这个:)

const resultRenderer = (data) => {
  debugger;
  return (
        <div>               
            <p>{data.clientName}</p>               
        </div>
  );
}

答案 1 :(得分:0)

您还可以将代码粘贴到搜索组件中吗?

答案 2 :(得分:0)

我能够在@ adamz4008的帮助下使其工作。

handleSearchChange的更新代码及其更正如下:

handleSearchChange = (e, { value }) => {

    var resultsArray = []
     this.setState({ isLoading: true, value })

                api.autoCompleteClient(value).then(res => {

                var tempArray = res.data.data.hits.hits
                var autoResult = []

                for(var i = 0; i < tempArray.length; i++)
                {
                    //Converted every result into an object
                    //Semantic React UI renders objects 

                    var result = {clientName : tempArray[i]._source.clientName}
                    resultsArray.push(result)
                }

                }).catch(error => {

                console.log('Some error got while performing autocomplete for clients ', error)
                })


    setTimeout(() => {
      if (this.state.value.length < 1) return this.setState(initialState)

      this.setState({
        isLoading: false,
        results: resultsArray,
      })
    }, 300)
  }

更正后,结果渲染器的外观如下:

const resultRenderer = (data) => {
    console.log('Inside resultRenderer ', data)
    return (
        <div>               
            <p>{data.clientName}</p>               
        </div>
    );
    }