问题在搜索组件React中呈现搜索结果

Question

我正在尝试将自定义渲染用于搜索框。我正在使用语义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)
  }

可以在下面的屏幕截图中看到打印时渲染结果的结果：

但是，搜索栏中的结果为空，出现以下错误，如下所示：

在结果渲染器中，如果我输入打印语句，则会得到以下结果：

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

Answer 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>
  );
}

Answer 2

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

Answer 3

我能够在@ 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>
    );
    }