React hooks在从子组件获取数据时执行无限抓取，但如果父组件是类组件则没有问题

Question

我有一个可重用的SearchHeader组件，它有一个受控的输入，并将数据从输入传递给父组件

SearchHeader.js

const SearchHeader = ({ onChangeSearch }) => {
const [searchValue, setSearchValue] = useState('');
useEffect(() => {
const timeoutId = setTimeout(() => {
onChangeSearch(searchValue);
}, 400);
return () => {
clearTimeout(timeoutId);
};
}, [searchValue, onChangeSearch]);
return (
<Container>
<ContainerHead>
<ContainerInput>
<IoSearch />
<div style={{ width: '5px' }}></div>
<TextInput
className="TextInput_Search"
placeholder="Search here..."
value={searchValue}
onChange={(evt) => setSearchValue(evt.target.value)}
/>
</ContainerInput>
<div style={{ width: '8px' }}></div>
<Text
size="12px"
weight="400"
color={Token.color.white}
cursor="pointer"
onClick={() => history.goBack()}
>
Batal
</Text>
</ContainerHead>
</Container>
);
};

一切都是好的，当我使用这个组件类中的组件，使一个API请求，并设置结果的状态

UniversalSearch.js

class UniversalSearch extends Component {
state = {
searchResult: [],
};
handleSearch = (value) => {
if (value) {
universalSearch(value).then((response) => {
this.setState({ searchResult: response.data });
console.log(response.data);
});
}
};
render() {
return (
<div>
<SearchHeader onChangeSearch={this.handleSearch} />
</div>
);
}
}

但是当我把组件变成一个功能组件时，句柄搜索不会停止获取API请求

export default function UniversalSearch() {
const [searchResult, setSearchResult] = useState([]);
const handlesearch = (value) => {
universalSearch(value).then((response) => {
setSearchResult(response.data)
console.log(response.data);
});
return (
<div>
<SearchHeader onChangeValue={handlesearch}/>
</div>
);
}

只有当我为searchResult设置状态时才会无限抓取。但在类组件的一切工作如预期，让我很困惑，这是怎么可能的?

Answer 1

这种情况似乎会发生，因为每次在函数中设置状态值时，组件都会呈现并创建一个新函数。

为了解决这个问题，您可以使用useCallback.

const handlesearch = useCallback((value) => {
universalSearch(value).then((response) => {
setSearchResult(response.data)
console.log(response.data);
}), [universalSearch])