React useContext修改数组状态后UI未更新，如何实现重渲染？

通过useContext定义了包含数组的状态对象，但在组件内修改值后，状态已更新但UI未重新渲染，代码实现如下：

export function BookmarkProvider({ children }) {
  const [bookmarks, setBookmarks] = useState({
    books: [],
    podcasts: [],
    collections: [],
  });

  const [booksmarksFetched, setBooksmarksFetched] = useState(false);

  const updateBookmarks = useCallback(
    (bookmark) => {
      setBookmarks(bookmark);
    },
    [bookmarks]
  );

  return (
    <BookmarkCreateContext.Provider
      value={{
        bookmarks,
        updateBookmarks,
        booksmarksFetched,
        setBooksmarksFetched,
      }}
    >
      {children}
    </BookmarkCreateContext.Provider>
  );
}

export function BookmarkContext() {
  return useContext(BookmarkCreateContext);
}

请问如何正确使用useContext，使读取这些数组值的UI实现更新？

核心问题在于React状态更新依赖引用变化：如果直接修改原bookmarks对象内的数组（比如用push/splice），再把原对象传给setBookmarks，因为对象引用未变，React会判定状态没有更新，不会触发UI重渲染。另外updateBookmarks的useCallback依赖bookmarks是冗余的，还可能引发闭包问题。

1. 确保更新状态时生成新的对象/数组引用 #

不要直接修改原状态，而是通过解构赋值创建新的对象或数组，保证引用变化：

// 消费组件中调用updateBookmarks的示例
const { bookmarks, updateBookmarks } = BookmarkContext();
const addBook = (newBook) => {
  updateBookmarks({
    ...bookmarks,
    books: [...bookmarks.books, newBook]
  });
};

2. 修正Provider中的updateBookmarks实现 #

移除useCallback中不必要的bookmarks依赖，同时可以封装更灵活的更新方法（可选，方便不同场景的更新）：

export function BookmarkProvider({ children }) {
  const [bookmarks, setBookmarks] = useState({
    books: [],
    podcasts: [],
    collections: [],
  });

  const [booksmarksFetched, setBooksmarksFetched] = useState(false);

  // 用函数式更新避免闭包问题，移除冗余依赖
  const updateBookmarks = useCallback(
    (newBookmarks) => {
      setBookmarks(prev => typeof newBookmarks === 'function' ? newBookmarks(prev) : newBookmarks);
    },
    []
  );

  // 可选：封装针对特定数组的更新方法，简化组件调用
  const addBookToBookmarks = useCallback((newBook) => {
    setBookmarks(prev => ({
      ...prev,
      books: [...prev.books, newBook]
    }));
  }, []);

  return (
    <BookmarkCreateContext.Provider
      value={{
        bookmarks,
        updateBookmarks,
        addBookToBookmarks,
        booksmarksFetched,
        setBooksmarksFetched,
      }}
    >
      {children}
    </BookmarkCreateContext.Provider>
  );
}

export function BookmarkContext() {
  return useContext(BookmarkCreateContext);
}

3. 消费组件的注意事项 #

在消费Context的组件中，确保直接读取状态中的数组，不要在组件外部或useEffect空依赖中缓存旧的数组引用，否则会拿到过期值：

function BookmarksList() {
  const { bookmarks } = BookmarkContext();
  return (
    <ul>
      {bookmarks.books.map(book => (
        <li key={book.id}>{book.title}</li>
      ))}
    </ul>
  );
}

内容的提问来源于stack exchange，提问作者Nilesh102001