我正在尝试将自定义渲染用于搜索框。我正在使用语义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)
}
可以在下面的屏幕截图中看到打印时渲染结果的结果:
但是,搜索栏中的结果为空,出现以下错误,如下所示:
在结果渲染器中,如果我输入打印语句,则会得到以下结果:
关于我可能做错事情的任何想法。所有帮助将不胜感激!
我认为这是罪魁祸首:
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>
);
}
您还可以将代码粘贴到搜索组件中吗?
我能够在@ 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>
);
}