使用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

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

医生说：

React保证调度函数标识是稳定的，并且不会在重新呈现时更改。
这就是为什么从use效应或useCallback依赖列表中省略它是安全的。