Fatal编程技术网
  • javascript/
  • Javascript 为什么我的react搜索栏说v.indexOf不是一个函数

Javascript 为什么我的react搜索栏说v.indexOf不是一个函数

javascript node.js reactjs ecmascript-6

Javascript 为什么我的react搜索栏说v.indexOf不是一个函数,javascript,node.js,reactjs,ecmascript-6,Javascript,Node.js,Reactjs,Ecmascript 6,我明白，indexOf是一种方法，过去我的搜索栏是有效的。当我开始添加生产实时数据与虚拟实时数据时，会导致此错误。 未处理的拒绝（TypeError）：v.indexOf不是一个函数 73 | })); 74 | } else { 75 | const suggestions = data.filter(function(v){ > 76 | if(v.indexOf(value.toLowerCase()) !== -1 || v.indexOf(valu

我明白，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>
我猜有时候
v
不是字符串。啊，可能是这样，我之前读到了一些关于将
indexOf
的数据转换为字符串的内容，这是一个可能的解决方案。让我看一下
console.log（v）
1秒。是的，这是一个对象，您还应该重新处理您的回访。您正在混合返回和解析，以及将承诺返回到另一个承诺中的不必要的换行提取。很抱歉，从12月9日起，我就没有接触过此代码。如果我没记错的话，在这背后可能有一些状态呈现rational。我想有时候
v
不是一个字符串。啊，可能是这样，我之前读过一些关于将
indexOf
的数据转换成字符串的内容，这是一个可能的解决方案。让我看一下
console.log（v）
1秒。是的，这是一个对象，您还应该重新处理您的回访。您正在混合返回和解析，以及将承诺返回到另一个承诺中的不必要的换行提取。很抱歉，从12月9日起，我就没有接触过此代码。如果我没记错的话，在这背后有一些可能的状态。 
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;