使用useContext和useReducer进行状态管理，并使用useEffect获取数据

Question

我有一个React应用程序，它使用useContext和useReducer管理其全局状态。我的BookList组件在装载时需要从服务器获取书籍。如果取书成功，则应将它们存储为全局状态。

我的方法如下

function BookList() {
const [state, dispatch] = useContext(BookContext);
const [loading, setLoading] = useState(true);
useEffect(() => {
BookService
.fetchBooks()
.then(resp => {
setLoading(false);
dispatch({
type: FETCH_BOOKS,
books: resp.data
});
});
}, []);
return (
<div>
{loading
? "Loading ..."
: state.books.map(book => (
<div key={book.id}>{`${book.title} - $${book.price}`}</div>))
}
</div>
);
}

这起作用，但会产生警告

React Hook useEffect缺少依赖项："dispatch"。任何一个

是否必须将dispatch添加到依赖数组中以消除警告，或者有更好的方法吗？

Answer 1

这里的警告不是很重要，因为文档建议从useEffect的依赖项列表中省略dispatch，但您可以安全地将其放在依赖项数组中，因为它的标识始终是稳定的。

医生说：

React保证dispatch函数身份是稳定的，并且在重新渲染时不会更改
这就是为什么从useEffect或useCallback依赖项列表中省略是安全的。