react-hooks/exhaustive-deps 导致依赖警告，修复挂起代码

Question

我正在做一个项目，并且第一次加入了 Hooks。在使用 useEffects 和 useState 钩子时，我遇到了来自 eslint 的奇怪警告。

我的代码：

import React, { useState, useEffect } from 'react';
import { Card } from 'antd';
import Search from 'antd/lib/input/Search';
import { IPatient } from 'types/IPatient';

const SearchBox = () => {
    const [searchTerm, setSearchTerm] = useState('');
    const [searchResults, setSearchResults] = useState<IPatient[]>([]);

    const handleChange = (event: any) => {
        setSearchTerm(event.target.value);
    };
    const cards: IPatient[] = [
        {
            id: 1,
            name: 'Erling',
            description: ['tall', 'male', 'sick'],
            age: 98,
            isHuman: true,
        },

        // other data...
    ];

    useEffect(() => {
        const results: IPatient[] = cards.filter((card) =>
            card.name.toLowerCase().includes(searchTerm),
        );
        setSearchResults(results);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [searchTerm]);

    return (
        <>
            <div className="searchbox">
                <Search onChange={handleChange} />
            </div>
            <div>
                {searchResults.map((data) => (
                    <Card key={data.id} hoverable>
                        <h1>{data.name}</h1>
                        <p>Patient ID: {data.id} </p>
                        <p>Age: {data.age} years old.</p>
                        <p>
                            Description:{' '}
                            {data.description[0] +
                                ' ' +
                                data.description[1] +
                                ' ' +
                                data.description[2]}
                        </p>
                    </Card>
                ))}
            </div>
        </>
    );
};
export default SearchBox;

现在，问题是 eslint 在我的依赖数组上调用了一个错误，如果我将两个变量（cards 和 searchTerms）都放在数组中，它会导致代码挂起和 webapp 崩溃。 eslint-line 目前已经到位以抑制警告，但这并不理想。

所以我想我的问题是如何规避这一点。我确信这是初学者的错误，因为这是我第一次使用 Hooks。任何帮助将不胜感激！

Answer 1

将卡片添加到依赖数组时的问题是，您在每次重新渲染时都创建了卡片数组的新引用，因此 useEffect 再次运行，导致无限循环

由于 Card 数组似乎是 const，你可以将它从函数组件中取出，然后将其添加到依赖数组中

const cards: IPatient[] = [
    {
        id: 1,
        name: 'Erling',
        description: ['tall', 'male', 'sick'],
        age: 98,
        isHuman: true,
    },

    // other data...
];


const SearchBox = () => {
    const [searchTerm, setSearchTerm] = useState('');
    const [searchResults, setSearchResults] = useState<IPatient[]>([]);

    const handleChange = (event: any) => {
        setSearchTerm(event.target.value);
    };

    useEffect(() => {
        const results: IPatient[] = cards.filter((card) =>
            card.name.toLowerCase().includes(searchTerm),
        );
        setSearchResults(results);
    }, [searchTerm, cards]);

   ...