Reactjs 通过警告对引导类型A头过滤器作出反应

我使用react bootstrap typeahead允许用户根据姓名或电子邮件搜索人员列表。我使用数据字段选项遵循自定义筛选示例，一切正常，只是控制台中我输入的每个字母都会收到多个警告：

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"} 
]

这是我的typeahead代码：

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

render（）{
常数{
孤岛，
}=本州；
常量filterByFields=['email'，'displayName']；
返回(
(
{option.displayName}
{option.email}
)}
/>
);
}
}

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

国家

labelKey属性指定用于搜索和渲染选项和选择的字符串

由于您希望通过用户的全名和电子邮件搜索用户，因此需要将其作为labelKey提供

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

`${option.fullName}${option.email}`/>

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