Next.js中Context传值至数组内组件时出现undefined问题求助

这是组件渲染时机和状态更新不同步导致的：

• 初始渲染时data是undefined，此时modalsBase里的<TaskItemForm>等组件已经被创建，传入的data自然是undefined。
• 异步获取到数据更新data后，组件会重新渲染，modalsBase也会重新生成，但如果你的modals状态没同步更新，实际渲染的还是之前存的旧组件实例，它们的props不会自动刷新。

方案1：让模态框配置响应data变化 #

用useMemo缓存modalsBase，确保data更新时重新生成配置，再同步到modals状态：

const [data, setData] = useState();
const [modals, setModals] = useState([]);

const router = useRouter();
const query = router.query;

const { collectionData } = useContext(toolsContext);

useEffect(() => {
  const getData = async () => {
    const ss = await collectionData(query.taskId);
    setData(ss);
  };
  getData();
}, [query.taskId, collectionData]); // 补全依赖，避免闭包拿旧值

// 只有data变化时才重新生成模态框配置
const modalsBase = useMemo(() => [
  {
    name: "collectCreator",
    openStatus: false,
    content: <CollectionForm />,
  },
  {
    name: "taskItemCreator",
    openStatus: false,
    content: <TaskItemForm data={data} />,
  },
  {
    name: "taskCreator",
    openStatus: false,
    content: <TasksForm data={data} />,
  },
  {
    name: "collectionEdit",
    openStatus: false,
    content: <CollectionEditForm data={data} />,
  },
  {
    name: "taskItemEdit",
    openStatus: false,
    content: <TaskItemEditForm />,
  },
  {
    name: "tasksEdit",
    openStatus: false,
    content: <TasksEditForm />,
  },
], [data]);

// 同步更新modals状态
useEffect(() => {
  setModals(modalsBase);
}, [modalsBase]);

方案2：用渲染函数延迟创建组件 #

把content改成函数，需要渲染时再执行，这样每次都能拿到最新的data：

const modalsBase = [
  {
    name: "collectCreator",
    openStatus: false,
    content: () => <CollectionForm />,
  },
  {
    name: "taskItemCreator",
    openStatus: false,
    content: () => <TaskItemForm data={data} />,
  },
  // 其他模态框配置同理修改
];

// 渲染时调用函数生成组件
{modals.map(modal => modal.openStatus && modal.content())}

额外提示 #

原代码里useEffect的依赖数组是空的，这会导致query.taskId或collectionData变化时无法重新获取数据，一定要把这两个变量加到依赖数组里。

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