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

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

3 个答案: