Question

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

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'中的项目实际上是字符串。知道如何消除此警告吗？

Answer 1

doc指出

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

由于要按用户的全名和电子邮件搜索用户，因此需要将其提供为labelKey

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

React-bootstrap-typeeahead过滤器警告

1 个答案: