本文旨在解决 React Hooks 结合 MERN 栈开发中，由于 useEffect 依赖项缺失导致数据无法正确获取的问题。通过分析问题代码，我们将深入探讨如何正确使用 useEffect，并结合 useCallback 优化性能，同时提供代码示例，帮助开发者避免类似错误，构建更健壮的 React 应用。
在 React 开发中，useEffect Hook 用于处理副作用操作，如数据获取、订阅事件等。正确使用 useEffect 的依赖项数组至关重要，否则可能导致组件行为异常，例如数据未更新或无限循环。本文将以一个 MERN 栈项目中的巴士信息展示为例，详细讲解如何避免 useEffect 的常见错误，并优化代码性能。
理解 useEffect 的依赖项
useEffect 接收两个参数：一个回调函数和一个可选的依赖项数组。当依赖项数组中的任何一个值发生变化时，回调函数就会被执行。如果依赖项数组为空 []，则回调函数只会在组件挂载时执行一次。如果省略依赖项数组，则回调函数会在每次组件渲染后执行。
在提供的代码中，Home 组件使用 useEffect 获取巴士数据：
useEffect(() => {
getBuses();
//setSelectedBus();
}, [])控制台提示 "React Hook useEffect has a missing dependency: 'getBuses'"。这意味着 getBuses 函数在组件的生命周期内可能会发生变化，但 useEffect 并未追踪这种变化。因此，getBuses 可能使用了过时的状态或 props，导致数据获取不正确。
解决方案：添加依赖项
要解决这个问题，需要将 getBuses 添加到 useEffect 的依赖项数组中：
useEffect(() => {
getBuses();
}, [getBuses])这样，当 getBuses 函数发生变化时，useEffect 就会重新执行，确保获取最新的数据。
优化：使用 useCallback
为了进一步优化代码，可以结合 useCallback Hook 来创建 getBuses 函数。useCallback 会返回一个 memoized 版本的函数，只有当依赖项发生变化时，才会重新创建函数。这可以避免不必要的函数重新创建，提高性能。
import React, { useEffect, useState, useCallback } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { axiosInstance } from '../helpers/axiosInstance';
import { HideLoading, ShowLoading } from '../redux/alertsSlice';
import { Col, Row, message } from 'antd';
import Bus from '../components/Bus';
function Home() {
const { user } = useSelector(state => state.users)
const [filters = {}, setFilters] = useState({});
const dispatch = useDispatch();
const [buses, setBuses] = useState([]);
const getBuses = useCallback(async () => {
dispatch(ShowLoading());
axiosInstance.post("/api/buses/get-all-buses", filters) // Directly use filters
.then((response) => {
if (response?.data?.success) {
setBuses(response.data.data);
} else {
message.error(response.data.message);
}
})
.catch((error) => message.error(error.message))
.finally(() => dispatch(HideLoading()));
}, [filters, dispatch]); // Add dispatch to dependencies
useEffect(() => {
getBuses();
}, [getBuses])
const handleOnChange = useCallback(({ target: { name, value } }) => {
setFilters((prevState) => ({ ...prevState, [name]: value }));
}, []);
return (
<div>
<div className='my-3 card p-2'>
<Row gutter={10}>
<Col lg={6} sm={24}>
<input type='text'
placeholder='From'
value={filters.from}
name="from"
onChange={handleOnChange}
/>
</Col>
<Col lg={6} sm={24}>
<input type='text'
placeholder='To'
value={filters.to}
name="to"
onChange={handleOnChange}
/>
</Col>
<Col lg={6} sm={24}>
<input type='date'
placeholder='Date'
value={filters.journeyDate}
name="journeyDate"
onChange={handleOnChange}
/>
</Col>
<Col lg={6} sm={24}>
<button className='primary-btn' onClick={() => getBuses()}>
Filter
</button>
</Col>
</Row>
</div>
<div>
<Row gutter={[15, 15]}>
{buses.filter((bus) => bus.status === "Yet to start").map((bus) => (
<Col lg={12} xs={24} sm={24}>
<Bus bus={bus} />
</Col>
))}
</Row>
</div>
</div>
)
}
export default Home代码解释：
- useCallback(..., [filters, dispatch]): getBuses 函数现在使用 useCallback 包裹，依赖于 filters 和 dispatch。这意味着只有当 filters 或 dispatch 发生变化时，getBuses 才会重新创建。 并且直接将filters传递给了后端接口，避免了不必要的对象拷贝。
- useEffect(..., [getBuses]): useEffect 现在依赖于 getBuses。当 getBuses 函数发生变化时（即 filters 或 dispatch 发生变化），useEffect 重新执行，获取最新的巴士数据。
- useCallback(..., []): 使用useCallback创建handleOnChange 函数，并添加了动态的name属性，用于处理input的change事件。
注意事项
- 确保 useEffect 的依赖项数组包含所有在回调函数中使用的、可能发生变化的值。
- 使用 useCallback 优化函数，避免不必要的函数重新创建。
- 仔细检查控制台的警告信息，它们通常能提供关于依赖项问题的线索。
总结
正确使用 useEffect 的依赖项数组是 React 开发中的一项重要技能。通过将所有必要的依赖项添加到数组中，并结合 useCallback 优化函数，可以避免数据获取错误，提高组件性能，并构建更健壮的 React 应用。本文通过一个 MERN 栈项目的实例，详细讲解了如何解决 useEffect 的常见问题，并提供了可复用的代码示例。希望这些信息能帮助开发者更好地理解和应用 React Hooks。
