почему моя строка поиска реагирует, говоря v.indexOf не является функцией

Question

Я понимаю, indexOf - это метод, в прошлом моя панель поиска работала. Когда я начал добавлять производственные данные в реальном времени против фиктивных данных в реальном времени, это вызывает эту ошибку. Необработанный отказ (TypeError): v.indexOf не является функцией

  73 |   }));
  74 | } else {
  75 |   const suggestions = data.filter(function(v){
> 76 |       if(v.indexOf(value.toLowerCase()) !== -1 || v.indexOf(value.toUpperCase()) !== -1){
     | ^  77 |           return v
  78 |       }
  79 |   })

Я не совсем уверен, что происходит, это должен быть мой поисковый запрос и отображение предложений. Конечным результатом будет таблица с данными из предложения.

      <Table celled>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Order#</Table.HeaderCell>
            <Table.HeaderCell>Billing Address</Table.HeaderCell>
            <Table.HeaderCell>Shipping Address</Table.HeaderCell>
            <Table.HeaderCell>Email</Table.HeaderCell>
            <Table.HeaderCell>Phone Number</Table.HeaderCell>
            <Table.HeaderCell>Sales Channel</Table.HeaderCell>
            <Table.HeaderCell>Order Date</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
      <Table.Body>
      {suggestions.map((item, index) => (

        <Table.Row className="hoverRow"> 
          <Table.Cell  key={index} onClick={() => this.addToQuery(item)}>
          {item.customerPO}
          </Table.Cell>
          <Table.Cell>
            {item.billToAddress}
          </Table.Cell>
      <Table.Cell>{item.shipToAddress}</Table.Cell>
      <Table.Cell>{item.email}</Table.Cell>
      <Table.Cell>{item.phone}</Table.Cell>
      <Table.Cell>{item.customerContact}</Table.Cell>
      <Table.Cell>{item.dateCreated}</Table.Cell>
        </Table.Row>
         ))}
      </Table.Body>
      </Table>

Вот мое обещание, и оно даже выполняется. Я могу console.log данные. Так что это дает мне предложение просто не в пользовательском интерфейсе. Вот весь файл.

import React, { Component } from "react";
import {Input, Label, Table, Icon, Header} from 'semantic-ui-react'
import "./SearchOrderBar.css";
import { resolve } from "dns";
class SearchOrderBar extends Component {
  constructor(props) {
    super(props);
    this.text = "";
    this.state = {
      suggestions: [],
      addToQuery: false,
      Query: [],
      searchTerm: ""
    };
    this.addToQuery = this.addToQuery.bind(this);  

  }

  fetchCallBack() {

    return new Promise((resolve, reject) => {
      let searchTerm = this.state.searchTerm;
    return fetch(`http://localhost:5000/api/searchorders/${searchTerm}/`)
      .then(res => {
        if (!res.ok) {
            throw res;
          }
          // Convert serialized response into json
          return res.json()
        }).then(data => {
            //Use data
            let searchTerm = data.map(data => {
                let rData = {};
                rData = data;
                return rData;
            })
            this.item = searchTerm;
            console.log('here from callback')
            resolve(searchTerm)
      })
    })
  }
  onTextChanged = (e) => {
    const value = e.target.value;
    this.setState(state => {
      return {
      searchTerm: value
      }
    })
    console.log(this.fetchCallBack())
    this.fetchCallBack().then( data => {
      console.log(data)
    if (value.length === 0) {
      this.setState(() => ({
        suggestions: []
      }));
    } else {
      const suggestions = data.filter(function(v){
          if(v.indexOf(value.toLowerCase()) !== -1 || v.indexOf(value.toUpperCase()) !== -1){
              return v
          }
      })
      this.text = value;
      this.setState(state => {
         return {     
              suggestions: suggestions.sort()
            };
          }
      );
    }
  })
  };
  addToQuery(data) {
    let addToQuery;
    let preQuery = this.state.Query;
    let currentQuery = preQuery.concat(data)
    this.setState(prevState => {
      addToQuery = true
      if (addToQuery !== false){
        this.setState({Query: currentQuery
        })
      }
      console.log("addToQuery Results")
      console.log(this.state.Query)
    })
  }

  renderSuggestions() {
    const { suggestions } = this.state;
    if (suggestions.length === 0) {
      return (
        <Table celled>
        <Table.Body>
        <Table.Cell colspan="7">
            <div className="ui fluid warning icon message">
            <Icon name="exclamation triangle" size="huge" color="orange"/>
            <div className="content">
            <Header>No Records Found</Header>
            <p>Try Seaching by one of the following:</p>
            <ul>
                <dt>Name</dt>
                <dt>Order Number</dt>
                <dt>Address (Shipping or Billing )</dt>
                <dt>Phone Number</dt>
                <dt>Email</dt>
            </ul>
            </div>
            </div>
        </Table.Cell>
        </Table.Body>
        </Table>
      );
    }
    return (
      <Table celled>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Order#</Table.HeaderCell>
            <Table.HeaderCell>Billing Address</Table.HeaderCell>
            <Table.HeaderCell>Shipping Address</Table.HeaderCell>
            <Table.HeaderCell>Email</Table.HeaderCell>
            <Table.HeaderCell>Phone Number</Table.HeaderCell>
            <Table.HeaderCell>Sales Channel</Table.HeaderCell>
            <Table.HeaderCell>Order Date</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
      <Table.Body>
      {suggestions.map((item, index) => (

        <Table.Row className="hoverRow"> 
          <Table.Cell  key={index} onClick={() => this.addToQuery(item)}>
          {item.customerPO}
          </Table.Cell>
          <Table.Cell>
            {item.billToAddress}
          </Table.Cell>
      <Table.Cell>{item.shipToAddress}</Table.Cell>
      <Table.Cell>{item.email}</Table.Cell>
      <Table.Cell>{item.phone}</Table.Cell>
      <Table.Cell>{item.customerContact}</Table.Cell>
      <Table.Cell>{item.dateCreated}</Table.Cell>
        </Table.Row>
         ))}
      </Table.Body>
      </Table>
    );
  }
  handleIconClick(){
    console.log('icon clicked ' + this.state.Query )
  }
  render() {
      const {text} = this.state
      console.log(this.state)
    return (
        <>
      <div className="App-Component">
        <div className="App-Search">
          <Input icon={{ name: 'search', circular: true, link: true, onClick: () => this.handleIconClick() }} placeholder="Search" value={text} type="text" onChange={this.onTextChanged} className="App-Search"/>
          {this.renderSuggestions()}
        </div>
      </div>
      </>
    );
  }
}
export default SearchOrderBar;