Javascript 如何从Axios.get获取返回并在功能组件上动态渲染组件

我有一个功能组件，我正在尝试从axios获取数据。获取并根据请求的响应动态呈现一些组件

如果我使用console.log，则响应正常，但我的问题是如何使用axios.get返回在屏幕上创建组件

我试过使用一个简单的数组，使用它我可以创建组件。我想要的是在屏幕上创建组件，就像我对数组所做的一样

在发布自己的帖子之前，我读了很多帖子。我真的很想得到一些帮助或指导

从“React”导入React，{createElement，useState，useEffect}； 从“react native”导入{文本、样式表、视图、TouchableOpacity、图像}； 从“axios”导入axios； 常量主屏幕={navigation}=>{ axios。gethttp://100.103.16.113:8081/api/checklists, { }.那么 功能反应{ console.logresponse.data； }.catcherror=>{ console.logerror； } 常量检查表=[{ id:1， 检查表描述：检查表1 }, { id:2， 检查表描述：检查表2 }, { id:3， 检查表描述：检查表3 } ] 回来 选择一个审核 {} {checklists.mapr=> navigation.navigate'AuditS'}style={style.button} > {r.checklisT_DESCRIPTION} } 导航。导航“登录”} > 注销 ; }; const styles=StyleSheet.create{ 正文：{ 尺寸：50， fontFamily:“Comfortaa常规”， 对齐项目：中心， text垂直对齐：居中， text对齐：居中， 内容：中心， }, 容器：{ 玛金托普：50， 方向：世界其他地区， marginLeft:50， 宽度：“100%” }, 主容器：{ 方向：列， 宽度：“80%”， 内容：中心， 内容：中心， }, 底部容器：{ 玛金托普：“70%， 宽度：“100%”， 对齐项目：中心， 证明内容：柔性端， 对齐内容：柔性端， }, 注销：{ 玛金托普：50， 差额：15， 身高：60， 宽度：440， borderColor:'000000'， 背景颜色：“000000”， 边界宽度：2， 边界半径：10， 尺码：18， text对齐：居中， text垂直对齐：居中， 颜色：FFFFFF， fontFamily:“Comfortaa Bold” }, 按钮：{ 背景色：“0f99f5”， 尺寸：16， 颜色：“FFF”， 宽度：150， 身高：150， 边界半径：10， text垂直对齐：底部， text对齐：居中， 澳门时间:20,， marginHorizontal:10， fontFamily:“Comfortaa Bold” }, 按钮文字：{ text垂直对齐：底部， text对齐：居中， 尺寸：16， 颜色：“FFF”， marginHorizontal:10， fontFamily:“Comfortaa Bold” }, 图片：{ 宽度：50%， 身高：50%， 内容：中心， 我自己：中心， 玛金托普：10， marginBottom:10 } }; 导出默认主屏幕；

---

您需要在组件内部使用状态

从“React”导入React，{createElement，useState，useEffect}； 常量主屏幕={navigation}=>{ const[checkList，setCheckList]=使用状态[{ id:1， 检查表描述：检查表1 }, { id:2， 检查表描述：检查表2 }, { id:3， 检查表描述：检查表3 } ]; useEffect=>{ axios。gethttp://100.103.16.113:8081/api/checklists, { }.那么 功能反应{ setCheckListresponse.data；//更新状态 }.catcherror=>{ console.logerror； } }, [] 回来

---

您需要在组件内部使用状态

从“React”导入React，{createElement，useState，useEffect}； 常量主屏幕={navigation}=>{ const[checkList，setCheckList]=使用状态[{ id:1， 检查表描述：检查表1 }, { id:2， 检查表描述：检查表2 }, { id:3， 检查表描述：检查表3 } ]; useEffect=>{ axios。gethttp://100.103.16.113:8081/api/checklists, { }.那么 功能反应{ setCheckListresponse.data；//更新状态 }.catcherror=>{ console.logerror； } }, [] 回来

---

您只需将回调保存在如下状态：

...

const [checklist, setChecklist] = React.useState([]);
useEffect(() => {
axios.get("http://100.103.16.113:8081/api/checklists", {})
  .then
    (function (response) {
      setChecklist(response?.data);
    console.log(response.data);
  }).catch(error => {
    console.log(error);                        
  })
}, []);
...

为了避免空指针异常，我建议您使用

---

并阻止渲染，直到承诺得到解决。

您只需将回调保存在以下状态：

...

const [checklist, setChecklist] = React.useState([]);
useEffect(() => {
axios.get("http://100.103.16.113:8081/api/checklists", {})
  .then
    (function (response) {
      setChecklist(response?.data);
    console.log(response.data);
  }).catch(error => {
    console.log(error);                        
  })
}, []);
...

---

为了避免空指针异常，我建议您使用并阻止渲染，直到承诺得到解决。

您可以为检查列表创建一个状态变量，然后使用axios填充它。进入useEffect。在映射列表和访问数据以呈现项目之前，请确保通过检查checklists.length来验证是否填充了检查表

常量主屏幕={navigation}=>{ //初始化状态变量 const[checklist，setchecklist]=useState[]； //填充数据 useEffect=>{ axios。gethttp://100.103.16.113:8081/api/checklists .功能反应{ setChecklistsresponse.data } .catcherror=>{ console.logerror； } }, [] //映射检查表时，请确保在映射前检查checklists.length {checklists.length&&checklists.mapr=> 导航。导航“审核”} style={style.button} > {r.checklisT_DESCRIPTION} } }

---

下面是一个示例

您可以为检查列表创建一个状态变量，然后使用axios.get在useEffect中填充它。在映射列表和访问数据以呈现项目之前，请确保通过检查checklists.length来验证是否填充了检查表

常量主屏幕={navigation}=>{ //初始化状态变量 const[checklist，setchecklist]=useState[]； //填充数据 useEffect=>{ axios。gethttp://100.103.16.113:8081/api/checklists .功能反应{ setChecklistsresponse.data } .catcherror=>{ console.logerror； } }, [] //映射检查表时，请确保在映射前检查checklists.length {checklists.length&&checklists.mapr=> 导航。导航“审核”} style={style.button} > {r.checklisT_DESCRIPTION} } }

---

下面是一个例子

@VinodSai是的，标点很好。结果我的回答太肤浅了。谢谢谢谢您的解释和附加链接。@VinodSai是的，标点符号很好。结果我的回答太肤浅了。谢谢感谢您的解释和附加链接。感谢您对代码的回答和评论，我根据您的方向更改了代码，代码正常工作。感谢您对代码的回答和评论，我根据您的方向更改了代码，代码正常工作。