Reactjs 来自getStaticProps的数据不显示在页面中（但在props中），使用NextJS
我在NextJS从API调用中呈现文本时遇到问题。基本上，我发出一个外部HTTP请求来获取一些模拟数据。模拟数据以道具的形式通过getStaticProps方法返回到组件上。在我的JSX中，我通过{props.data…}循环遍历props。为了简洁起见，我将显示下面的代码Reactjs 来自getStaticProps的数据不显示在页面中（但在props中），使用NextJS,reactjs,next.js,Reactjs,Next.js,我在NextJS从API调用中呈现文本时遇到问题。基本上，我发出一个外部HTTP请求来获取一些模拟数据。模拟数据以道具的形式通过getStaticProps方法返回到组件上。在我的JSX中，我通过{props.data…}循环遍历props。为了简洁起见，我将显示下面的代码 import*as React from“React”； 从“react”导入{useState、useEffect、useCallback、memo}； 从“下一步”导入{GetStaticProps}； 类型道具={
import*as React from“React”；
从“react”导入{useState、useEffect、useCallback、memo}；
从“下一步”导入{GetStaticProps}；
类型道具={
道具：{
数据：{}[]；
};
};
常量形式：React.NamedExoticComponent<
|React.RefAttributes
|{children？：React.ReactNode}
>=备忘录（（道具）=>{
const[formData，setFormData]=useState（{用户名：，密码：}）；
常量handleSubmit=（e）=>{
e、 预防默认值（）；
};
const handleSetFormData=useCallback(
（e） =>{
setFormData({
…表格数据，
[e.target.name]：e.target.value，
});
},
[表格资料]
);
返回(
提交
{props.data.map（（数据）=>{
返回(
- {data.completed}
- {data.title}
);
})}
);
});
类型GetStaticPropsTypeInterface={
道具：{
数据：{}[]；
};
};
导出常量getStaticProps：(
道具：React.PropsWithChildren
)=>承诺=（道具）=>{
返回取回（“https://jsonplaceholder.typicode.com/todos")
.然后（（res）=>res.json（））
。然后（（res）=>{
返回{
道具：{data:res}，
};
});
};
导出默认表单代码看起来很好，所以我想这个问题可能与其他问题有关
我的感觉是，您可能将表单组件放在组件
或src
目录中。Next.js只查看页面
目录的内部，并在服务器端呈现这些页面
下面是一个虚拟示例-如果在页面
目录之外使用此getStaticProps
函数，会发生什么
因此，解决方案是在pages/somePage.tsx中获取数据，并转发类似的道具。你是对的。在我们的应用程序中有几个不同的东西。1.）我的结构是“src->pages->index.tsx”，我所有的代码都在index.tsx中。现在，我已经将它设置为表单在components下，index.tsx仍然在pages下，但是现在它有了getStaticProps和props到UI的映射逻辑。我还在pages下添加了_app.tsx文件。看起来我需要退一步，检查一下文件结构：）。谢谢你的帮助！！