在自定义表中搜索 - 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>

   {searchResults.map(renderPerson)}

</tbody>

更改您的过滤方式结果（已更新）

const results = apiData.filter(person => 

   person.Info.Name.toLowerCase().includes(searchTerm)

);

....

const renderPerson = (item, index) => {

        return (

            <tr key={index}>

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

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

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

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

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

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

            </tr>

        )

    }

Answer 2

尝试这个

export default function () {

 

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

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

const apiData=[

        {

            ID:'1222',

            Info:{

                ID:'1222',

                EmailAddress:'[e-mail]',

                Number:'2222222222',

                AddressLine1:'test'

            }

        },

        {

            ID:'2333',

            Info:{

                ID:'2333',

                EmailAddress:'[e-mail]',

                Number:'1111111111',

                AddressLine1:'test2'

            }

        }

    ]

    

    const handleChange = event => {

        setSearchTerm(event.target.value);

        if(event.target.value){

            const results = apiData.filter(person => 

                person.ID.toLowerCase().includes(event.target.value)

            );

            setSearchResults(results);

        }else{

            setSearchResults([]);

        }

        

    };

    const renderPerson = (contact, index) => {

        return (

            <tr key={index}>

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

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

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

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

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

                <td>{contact.Info.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>

                    {searchResults.map(renderPerson)}

                </tbody>

            </table>

        </Fragment>

    )

 }