在Hook中复用React输入Props：为何结果未更新？

问题根源 #

react-use的useList Hook和React原生useState行为一致：传入的初始值仅在组件首次挂载时生效，后续即使作为参数的initialItems更新，useList内部维护的items状态也不会自动同步。

你的代码里，ViewDispatcher第一次渲染时initialItems是空数组，useList就把内部items初始化为空；当View组件获取到数据后，initialItems更新为有值的数组，但useList不会主动更新内部状态，所以items还是保持最初的空数组。

解决方法 #

通过useEffect监听initialItems的变化，一旦它更新，就调用useList提供的set方法同步内部状态。

修改后的ViewDispatcher代码：

import { useList } from 'react-use';
import { useEffect } from 'react';

export const ViewDispatcher = ({ mode, loading, items: initialItems }) => {
  const [items, { update, set }] = useList(initialItems);

  // 监听props变化，同步useList的内部状态
  useEffect(() => {
    set(initialItems);
  }, [initialItems, set]);

  console.log("[ViewDispatcher] Rendering", initialItems, items);

  switch (mode) {
    case "list":
      if (loading) {
        return null;
      }

      return <> {JSON.stringify(items)} </>;
    default:
      throw new Error("Unsupported view.");
  }
};

补充说明 #

useList提供的set方法用于直接替换整个列表，正好用来同步props更新后的数组。这样当View组件的异步请求完成、items props更新时，useEffect会触发，把新的数组同步到useList的items状态中，就能正常显示数据了。

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