React-bootstrap-typeeahead 过滤器通过警告答案

【问题标题】：React-bootstrap-typeeahead filterBy warningReact-bootstrap-typeeahead 过滤器通过警告
【发布时间】：2020-03-16 21:03:35
【问题描述】：

我正在使用 react-bootstrap-typeahead 允许用户根据他们的姓名或电子邮件搜索人员列表。我正在使用带有数据字段选项的自定义过滤示例here，一切正常，除了我在控制台中收到多个警告，每输入一个字母：

Warning: [react-bootstrap-typeahead] Fields passed to `filterBy` should have string values. Value will be converted to a string; results may be unexpected.

以下是我传递给组件的选项：

const options = [
{displayName: "John Doe", fullName: "John Henry Doe", email: "john_doe@gmail.com"}, 
{displayName: "Jane Smith", fullName: "Jane Susan Smith", email: "jane_smith@gmail.com"} 
]

这是我的预输入代码：

render() {
const {
  isLoading,
} = this.state;
const filterByFields = ['email', 'displayName'];
return (
  <TypeAheadSearchWrapper>
    <Typeahead
      filterBy={filterByFields}
      labelKey="displayName"
      options={options}
      placeholder={this.props.placeholder}
      onChange={this.handleChange}
      minLength={3}
      onInputChange={this.handleTextInput}
      isLoading={isLoading}
      renderMenuItemChildren={option => (
        <div>
          {option.displayName}
          <div className="sub-text">{option.email}</div>
        </div>
      )}
    />
  </TypeAheadSearchWrapper>
);
}
}

我完全按照示例进行操作，“filterByFields”中的项目实际上是字符串。知道如何摆脱这个警告吗？

【问题讨论】：

您在上面发布的代码不会触发警告。你能发布一个活生生的例子（jsfiddle、codepen等）吗？我最好的猜测是您的一个或多个数据选项在某处具有非字符串值，例如未定义的电子邮件。

标签： reactjs react-bootstrap-typeahead

【解决方案1】：

doc 声明

labelKey 属性指定将用于搜索和呈现选项和选择的字符串。

由于您想通过用户的全名和电子邮件搜索用户，您需要将他们作为 labelKey 提供

<Typeahead labelKey={option => `${option.fullName} ${option.email}`}/>

【讨论】：