javascript - 在搜索组件 React、Semantic-UI-React 中呈现搜索结果时出现问题

Question

我正在尝试为搜索框使用自定义呈现。我正在使用语义 ui react 。

以下是渲染方法的代码片段:

  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)

不确定您的数据是什么样的，但如果您有三个空结果并且有三个结果，我猜它没有捕获正确的属性。

看起来您需要在 .then() 回调中为 api.autoCompleteClient 设置状态。这样你就知道数据已经准备好了，而不是仅仅等待 300ms。

为了简洁/显示意图，我还建议使用 Array.map() 而不是 for 循环。

请注意，使用 Chrome 中的 React Devtools 扩展，您可以实时检查组件的状态/属性。

至于前两个控制台警告，我只是查看 SemanticUI 文档并查看该组件的 Prop 是什么，看起来实际上没有使用两个。

最后一个警告只是意味着您在映射多个组件时需要一个关键 Prop ，以帮助更有效地渲染它们。所以只需 key={someUniqueValue}。

编辑:试试这个:)

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