React中useEffect空依赖数组初始未触发？状态与Redux值不一致

问题原因 #

• 你的useEffect使用了空依赖数组[]，这意味着它只会在组件首次挂载时执行一次。
• 组件首次挂载时，Redux的books可能还未完成初始化或异步加载（你控制台看到的books.book有值，是组件后续重新渲染时打印的结果），此时books.book实际是undefined，setChoosebook(books.book)就把本地state设成了undefined。
• 之后Redux的books更新为有值状态，组件会重新渲染，但useEffect因依赖为空数组不会再次执行，所以本地choosebook不会被更新，依然是之前的undefined。
• 你的console.log会在每次组件渲染时执行，第二次渲染时会打印出更新后的books.book，但choosebook还是第一次useEffect设置的undefined，这就造成了“Redux值正常，state值异常”的现象。

解决办法 #

方法1：给useEffect添加正确依赖 #

把books加入useEffect的依赖数组，这样每当Redux的books变化时，都会重新更新本地的choosebook：

// 建议明确类型，不要用any
const [choosebook, setChoosebook] = useState<{roman: [], fantasy: []} | undefined>(undefined);

const books = useSelector((state: RootStateOrAny) => state.library.books);

useEffect(() => {
  setChoosebook(books.book);
}, [books]); // 添加books作为依赖

console.log(
  "books from state: ", choosebook,
  "books from redux: ", books.book
);

方法2：直接使用衍生状态，无需额外本地state #

如果choosebook只是books.book的镜像，完全不需要额外维护本地state，直接用books.book即可；如果需要转换逻辑，可用useMemo做衍生：

const books = useSelector((state: RootStateOrAny) => state.library.books);
// 仅当books变化时重新计算
const choosebook = useMemo(() => books.book, [books]);

console.log(
  "books from derived state: ", choosebook,
  "books from redux: ", books.book
);

额外建议 #

• 避免使用any类型，明确choosebook的类型（比如定义BookType接口），减少类型隐患。
• 检查Redux的初始状态，确保state.library.books.book有合理的初始值（比如默认设为{roman: [], fantasy: []}），这样首次挂载时就不会拿到undefined。

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