在自定义表中搜索 - React

Question

我正在尝试制作一个包含 api 数据可搜索的表。我正在路上，但不确定如何进一步进行。

代码如下所示：

const [searchTerm, setSearchTerm] = useState("");

    const [searchResults, setSearchResults] = useState([]);

    

    const handleChange = event => {

        setSearchTerm(event.target.value);

    };

    useEffect(() => {

        const results = apiData.filter(person => 

            person.toLowerCase().includes(searchTerm)

        );

        setSearchResults(results);

    }, [searchTerm]);

    const renderPerson = (contact, index) => {

        return (

            <tr key={index}>

                <td>{contact.ID}</td>

                <td>{contact.Info.Name}</td>

                <td>{contact.InfoID}</td>

                <td>{contact.Info.DefaultEmail.EmailAddress}</td>

                <td>{contact.Info.DefaultPhone.Number}</td>

                <td>{contact.Info.InvoiceAddress.AddressLine1}</td>

            </tr>

        )

    }

 return (

        <Fragment>

            <input type="text" value={searchTerm} onChange={handleChange} placeholder="Søk.."></input>

            <table id="myTable">

                <thead>

                    <tr className="header">

                        <th>ID</th>

                        <th>Navn</th>

                        <th>Info Id</th>

                        <th>E-post</th>

                        <th>Telefon</th>

                        <th>Adresse</th>

                    </tr>

                </thead>

                <tbody>

                    {apiData.map(renderPerson)}

                </tbody>

            </table>

        </Fragment>

    )

https://dev.to/asimdahall/simple-search-form-in-react-using-hooks-42pg 我已经遵循了本指南，但是由于我有 renderPerson 函数，我有点不确定如何处理这。

问题：有什么方法可以让它发挥作用，还是我的方法不对？我知道我需要以某种方式将 searchResult 放入 tbody 中，但随后表将不会被填充。

Answer 1

更改apiData为searchResults渲染时<tbody>&nbsp; &nbsp;{searchResults.map(renderPerson)}</tbody>更改您的过滤方式结果（已更新）const results = apiData.filter(person =>&nbsp;&nbsp; &nbsp;person.Info.Name.toLowerCase().includes(searchTerm));....const renderPerson = (item, index) => {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr key={index}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{item.ID}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{item.Info.Name}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{item.InfoID}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{item.Info.DefaultEmail.EmailAddress}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{item.Info.DefaultPhone.Number}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{item.Info.InvoiceAddress.AddressLine1}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }

Answer 2

尝试这个export default function () {&nbsp;const [searchTerm, setSearchTerm] = useState("");const [searchResults, setSearchResults] = useState([]);const apiData=[&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ID:'1222',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Info:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ID:'1222',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; EmailAddress:'[e-mail]',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Number:'2222222222',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; AddressLine1:'test'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ID:'2333',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Info:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ID:'2333',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; EmailAddress:'[e-mail]',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Number:'1111111111',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; AddressLine1:'test2'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; const handleChange = event => {&nbsp; &nbsp; &nbsp; &nbsp; setSearchTerm(event.target.value);&nbsp; &nbsp; &nbsp; &nbsp; if(event.target.value){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const results = apiData.filter(person =>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; person.ID.toLowerCase().includes(event.target.value)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setSearchResults(results);&nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setSearchResults([]);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; };&nbsp; &nbsp; const renderPerson = (contact, index) => {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr key={index}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{contact.ID}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{contact.Info.Name}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{contact.Info.ID}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{contact.Info.EmailAddress}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{contact.Info.Number}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{contact.Info.AddressLine1}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }&nbsp;return (&nbsp; &nbsp; &nbsp; &nbsp; <Fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" value={searchTerm} onChange={handleChange} placeholder="Søk.."></input>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <table id="myTable">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr className="header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>ID</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Navn</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Info Id</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>E-post</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Telefon</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Adresse</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {searchResults.map(renderPerson)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; &nbsp; &nbsp; </Fragment>&nbsp; &nbsp; )&nbsp;}