在livesearch ReactJS中插入数字

Question

我正在ReactJS中开发我的第一个应用程序。作为一个初学者，我遇到了一个问题。我的应用程序是电话簿，所以我有实时搜索来显示推荐的数据。对于字符串，一切都很好，但当我想创建选项"；按数字搜索"；我的应用程序不起作用。那么，你能告诉我应该做什么以及在哪里解决问题吗。问题出现在错误的regEx中？我尝试这样做：const pattern=/^[0-9\b]+$/，我应该把它放在哪里

谢谢你的帮助

错误：TypeError:index.number.match不是函数(匿名功能(

这是我的代码：

import React, {useState, useEffect} from 'react'
import '../CSS/App.css';
import axios from 'axios';
export default function Number() {
const [numberList, setNumberList] = useState([]);    
const [text, setText] = useState("");
const [suggestions, setSuggestions] = useState([]);
const [showNumber, setShowNumber] = useState([]);

useEffect(() => {
const loadNumbers = async () => {
const response = await axios.get("http://localhost:3001/numbers");
setNumberList(response.data);

};
loadNumbers();         

}, [])


const onChangeHandler = (text) => {
let matches = [];
if (text.length > 0 ) {
matches = numberList.filter((index) => {               
const regex = new RegExp(`${(text)}`, "gi");                
return index.number.match(regex);                
})

}
console.log('matches', matches);
setSuggestions(matches);
setText(text);

}    
}

这是我API的一部分：http://localhost:3001/numbers

{"id":1,"name":"Voditelj","number":26327,"visible":true,"active":true,"createdAt":"2021-11-12T15:36:51.000Z","updatedAt":"2021-11-12T15:36:51.000Z","DepartmentId":1,"RegionId":1,"Region":{"id":1,"regionTitle":"Firule","createdAt":"2021-10-29T10:11:40.000Z","updatedAt":"2021-10-29T10:11:40.000Z"},"Department":{"id":1,"departmentTitle":"Služba za informatiku","alias":"INF","createdAt":"2021-10-29T10:14:32.000Z","updatedAt":"2021-10-29T10:14:32.000Z","RegionId":1}},{"id":2,"name":"Voditelj","number":26333,"visible":true,"active":true,"createdAt":"2021-11-12T15:37:42.000Z","updatedAt":"2021-11-12T15:37:42.000Z","DepartmentId":2,"RegionId":1,"Region":{"id":1,"regionTitle":"Firule","createdAt":"2021-10-29T10:11:40.000Z","updatedAt":"2021-10-29T10:11:40.000Z"},"Department":{"id":2,"departmentTitle":"Služba za tehničke poslove","alias":"TEH","createdAt":"2021-10-29T10:14:47.000Z","updatedAt":"2021-10-29T10:14:47.000Z","RegionId":1}},{"id":3,"name":"Voditelj","number":27333,"visible":true,"active":true,"createdAt":"2021-11-12T15:37:52.000Z","updatedAt":"2021-11-12T15:37:52.000Z","DepartmentId":3,"RegionId":2,"Region":{"id":2,"regionTitle":"Križine","createdAt":"2021-10-29T10:11:46.000Z","updatedAt":"2021-10-29T10:11:46.000Z"},"Department":{"id":3,"departmentTitle":"Služba za tehničke poslove","alias":"TEH","createdAt":"2021-10-29T10:14:51.000Z","updatedAt":"2021-10-29T12:20:43.000Z","RegionId":2}}

Answer 1

所以我发现了一个错误。愚蠢的错误。

const onChangeHandler = (text) => { 
let matches = [];

if (text.length > 0 ) {
matches = numberList.filter((index) => {                             
const regex = new RegExp(`${(text)}`, "gi");                          
return index.number.toString().match(regex); //toString has been missing               
})

}
console.log('matches', matches);
setSuggestions(matches);
setText(text);

}