next.js 当我把数据传递给一个组件时，我得到了undefined

0x6upsns 于 2023-08-04 发布在其他

关注(0)|答案(1)|浏览(101)

好吧，我在nextjs项目中有Context，我在那里处理modals，我把modal细节放在数组（modalBase）中，我也从另一个上下文（toolsContext）中获取数据到这个上下文中，将数据传递给组件，但是当我在这个上下文中控制台数据时，它会给我数据，但在组件中，在将数据传递给组件后，它会给我未定义的数据，我感到困惑

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();
  }, []);

  // ======= Modal details
  const modalsBase = [
    {
      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 />,
    },
  ];

字符串
我想我遇到这个问题是因为数组中有组件，我试图将数据传递给组件

next.js

来源：https://stackoverflow.com/questions/76729962/when-i-pass-data-to-a-component-i-get-undefined

1条答案

按热度按时间

bybem2ql1#

data在组件中是未定义的，因为您在useEffect钩子中异步初始化它，然后立即在modalsBase数组中使用它。请记住，useEffect是在组件呈现之后执行的，获取数据也是一个异步操作。
这意味着当你的modalsBase数组被定义时，data仍然是undefined。它只在数据提取完成后才获得一个值，此时，您的modalsBase数组已经使用undefined数据定义。
要修复此问题，您应该将modalsBase数组移动到具有data依赖项的useEffect钩子中。这样，每当data发生变化时，数组将被重新定义。以下是您的操作方法：

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

useEffect(() => {
  const modalsBase = [
    {
      name: "collectCreator",
      openStatus: false,
      content: <CollectionForm />,
    },
    {
      name: "taskItemCreator",
      openStatus: false,
      content: <TaskItemForm data={data} />,
    },
    // ...
  ];

  setModals(modalsBase);
}, [data]);

字符串
现在，modalsBase在每次data更改时（包括初始提取）都会重新定义。组件将正确接收更新的data。
另外，我建议将data初始化为null，而不是undefined，这样可以更明确地表明它在开始时故意为空。这样，您就可以根据data是null还是有值来使用条件来呈现不同的内容。您可以通过将行const [data, setData] = useState();更改为const [data, setData] = useState(null);来完成此操作。
请记住，这将导致每次data更改时重新渲染。如果data经常更改，您可能需要考虑不同的方法，例如将加载状态传递给组件，或者获取组件本身内部的数据。

赞(0）回复(0）举报 2023-08-04

我来回答

next.js 当我把数据传递给一个组件时，我得到了undefined

1条答案

相关问题

热门标签

最新问答