TypeError - indexOf 不是函数（React Data Search with MySQL）

Question

我实际上正在 MERN Stack（MySQL、Express、React、Node）中构建检索功能。我已成功创建检索；但是基于主键的搜索不起作用。每当我在文本字段中输入值后单击搜索/获取按钮时，它都会显示标题错误。 "TypeError: challanNo.indexOf is not a function"

请帮忙。

我要搜索的 JS 文件

import React, { Component } from 'react'
import jwt_decode from 'jwt-decode'
import { Table, Button, Alert, ResponsiveEmbed } from 'react-bootstrap';
import { login } from './UserFunctions'
// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";
import matchSorter from 'match-sorter'
import { render } from "react-dom";

class Login extends Component {
    constructor(props) {
        super(props)
        this.state = {
            error: null,
            transaction: []

           // challan_no: null
        }

       //  this.onChange = this.onChange.bind(this)
         //this.searchEntry = this.searchEntry.bind(this)
       //  this.onSubmit = this.onSubmit.bind(this)

    }


    componentDidMount() {
        const apiUrl = 'http://localhost:3000/api/str/';
        fetch(apiUrl)
          .then( (response) => {
              return response.json();
            })
          .then((data) => {
              this.setState({ transaction: data.response })
              console.log(this.state.transaction)
            })
            .catch((error) => console.log(error));
      }

      filterChallan = (challanFilter) => {

        console.log("1:" + challanFilter)
        let filteredChallans = this.state.transaction
        console.log(filteredChallans)

        filteredChallans = filteredChallans.filter((challan) => {
          let challanNo = challan.CHALLAN_NO 
          console.log("Challan NO: " + challanNo)
          return challanNo.indexOf(challanFilter) !== -1
        })
        this.setState({
            filteredChallans
        })
        console.log(challanFilter)
      }

    //   searchEntry ()  {     
    //     console.log('in search entry..')
    //     const apiUrl = 'http://localhost:3000/api/str/1/';

    //     fetch(apiUrl)
    //     .then( (response) => {
    //         return response.json();
    //       })
    //     .then((data) => {
    //         this.setState({ transaction: data.response })
    //         console.log(this.state.transaction)
    //       })
    //       .catch((error) => console.log(error));
    //     }

    //  onSubmit(e){
    //      e.preventDefault()

    //      const user = {
    //          challan_no: this.state.challan_no
    //      }
    //      login(user).then(res=> {
    //          if(res) {
    //              this.props.history.push(`/profile`)
    //          }
    //      })
    //  }
    render() {
        return( 
        <div className="container">
                <div className="row">
                    <div className="col-md-6 mt-5 mx-auto">
                        <form className="form-horizontal" >
                            <h5 className="control-label">Fetch Fee Payment Details</h5>
                            <div className="form-row">
                            <div className="form-group col-md-10">
                                    <input type="text"
                                           className="form-control"
                                           name="challan_no"
                                           placeholder="Enter Challan Number"
                                           value={this.state.challan_no}
                                           onChange={this.filterChallan}
                                    />
                                </div>
                            </div>
                            <button className="btn btn-primary btn-md float-left">
                                Fetch
                            </button>
                        </form>
                    </div>
                </div>
                <Table className="box2">
            <thead>
              <tr>
                <th>Challan No</th>
                <th>Entity Name</th>
                <th>City</th>
                <th>Email</th>
                <th>Entity Type</th>
                <th>Registration No</th>
              </tr>
            </thead>
            <tbody>
            {this.state.transaction.map((str) => (
                <tr key={str.CHALLAN_NO}>
                  <td>{str.CHALLAN_NO}</td>
                  <td>{str.ENTITY_NAME}</td>
                  <td>{str.CITY}</td>
                  <td>{str.EMAIL}</td>
                  <td>{str.ENTITY_TYPE}</td>
                  <td>{str.REGISTRATION_NO}</td>
                  <td>
                    <button type="" className="btn btn-primary btn-md-7 float-left">
                     Delete
                    </button>
                  </td>
                </tr>
            ))}
            </tbody>
          </Table>
            </div>
        )
    }
}

export default Login

Answer 1

问题已解决。发生这种情况是因为 challanNo 未转换为字符串..

感谢大家的贡献:)

TypeError - indexOf 不是函数（React Data Search with MySQL）

TypeError - indexOf is not a function (React Data Search with MySQL)

mysql

node.js

reactjs

mern