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>
    );
}

这有效，但会发出警告

反应挂钩useEffect缺少依赖项：'dispatch'。要么...

我是否必须在依赖项数组中添加dispatch才能消除警告，还是有更好的方法？

Answer 1

此处的警告不是很相关，因为文档建议从dispatch和useEffect的依赖项列表中省略useReducer，但是您可以放心地将其放入依赖项数组中，因为dispatch的{{1}}函数的身份始终稳定。

doc说：

React保证useReducer功能标识是稳定的，并且不会在重新提供时更改。
这就是为什么可以安全地从useEffect或useCallback依赖项列表中省略的原因。

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

1 个答案: