在react js中搜索:我想搜索我的名字，并得到名字和id

Question

我试图在react js中进行搜索，其工作唯一的问题是我无法在我的搜索结果(id)中获得更多值

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSearch } from "@fortawesome/free-solid-svg-icons";
import { useState, useEffect } from "react";
import axios from "axios";
const initialState = {
idaddProducts: "",
};
const Searchclients = () => {
const [showResults, setShowResults] = React.useState(true);
const [poName, pnName] = React.useState(initialState);
const [showSerch, setShowSerch] = React.useState([]);
const [inputValue, setInputValue] = React.useState("");
const [filteredSuggestions, setFilteredSuggestions] = React.useState([]);
const [selectedSuggestion, setSelectedSuggestion] = React.useState(0);
const [displaySuggestions, setDisplaySuggestions] = React.useState(false);
//const [suggestions, setSuggestions] = useState([]);
const suggestions = [];
showSerch.forEach(function (data) {

var data = data.firstname;     ///////  i pass the name from here  i also want to pass id  it will look something like this  var data = data.id

suggestions.push(data);
});

const onChange = (event) => {
const value = event.target.value;
setInputValue(value);
setShowResults(false);
const filteredSuggestions = suggestions.filter((suggestion) =>
suggestion.toString().toLowerCase().includes(value.toLowerCase())
);
setFilteredSuggestions(filteredSuggestions);
setDisplaySuggestions(true);
};
const onSelectSuggestion = (index) => {
setSelectedSuggestion(index);
setInputValue(filteredSuggestions[index]);
setFilteredSuggestions([]);
setDisplaySuggestions(false);
};
const SuggestionsList = (props) => {

function finddoctor(e) {}
const {
suggestions,
inputValue,
onSelectSuggestion,
displaySuggestions,
selectedSuggestion,
} = props;
if (inputValue && displaySuggestions) {
if (suggestions.length > 0) {
return (
<ul className="suggestions-list" style={styles.ulstyle}>
{suggestions.map((suggestion, index) => {

const isSelected = selectedSuggestion === index;
const classname = `suggestion ${isSelected ? "selected" : ""}`;
return (
<li
style={styles.listyle}

key={index}
className={classname}
onClick={finddoctor(index)}
>
{suggestion}   {id } // i want the id passed here 
</li>
);
})}
</ul>
);
} else {
return <div>No suggestions available...</div>;
}
}
return <></>;
};

useEffect(() => {
axios
.get("my-url")
.then((res) => {
const data = res.data;
setShowSerch(data);
});

}, []);
return (
<div className="note-container" style={styles.card}>
<div style={styles.inner}>
<p style={{ textAlign: "left" }}>Search Doctors</p>
<form className="search-form" style={{}}>
{showResults ? (
<FontAwesomeIcon style={{ marginRight: "-23px" }} icon={faSearch} />
) : null}
<input
onChange={onChange}
value={inputValue}
style={styles.input}
type="Search"
/>
<SuggestionsList
//  onClick={() => onSelectSuggestion()}
inputValue={inputValue}
selectedSuggestion={selectedSuggestion}
onSelectSuggestion={onSelectSuggestion}
displaySuggestions={displaySuggestions}
suggestions={filteredSuggestions}
/>
</form>
</div>
</div>
);
};

我试图根据搜索我的名字来获取名字和id，但我只能通过过滤器

传递名字的代码工作，我能够得到基于搜索的所有名称，但我也想在那里的id

Answer 1

我认为你可以这样做:

• 在建议中使用整个对象，如下所示:

  showSerch。forEach(function (data)) {suggestions.push(数据);});

注意:我相信这个forEach可能没必要。

• 在过滤器方法中，您可以将值与name或id进行比较，如下所示:

  const filteredrecommendations = recommendations .filter((suggestion) =>建议.name. tostring ().toLowerCase().includes(value.toLowerCase()) ||建议.id. tostring ().toLowerCase().includes(value.toLowerCase()));

• 在li标签:

  {suggestion.name}{建议。Id}//我想在这里传递Id

我假设建议有一个id属性，如果没有，使用正确的属性