reactjs 使用Axios Async Await和Typescript从API检索数据

我已经为此奋斗了好几天，但似乎找不到一个有效的解决方案。我只是不断地从一个错误转到另一个错误。目前，我的表中只有一个条目，没有填充任何数据，只有一个空行。这是我能做到的最接近于使它工作的方法，因为至少这个解决方案正在呈现表。如果我将API调用更改为我在网上看到的任何解决方案，我开始收到可怕的“e.map不是函数”错误，屏幕变空，或者控制台日志将返回[object Object]，这取决于我所做的更改。有人能帮我找出为什么我的表没有填充吗？
这个解决方案在我的沙盒应用程序中运行得很好，但是一旦我把它放到实际的项目中，它就开始失败了。我怀疑这是因为实际的项目使用了Typescript，到目前为止，Typescript几乎提升了我试图添加到这个应用程序中的每一个增强功能。
currenty，以及res.data在setTableData（[res.data]）中将www.example.com放在方括号中时的日志;，我至少可以得到一个空表。但是如果我去掉方括号，我会得到“eidemap不是函数”错误。

我的控制台日志（res）正在返回：

{data：{...}，状态：200，状态文本：“”，标题：{...}，配置：{...}，...}配置：{过渡：{...}，转换请求：数组（1），转换响应：数组（1），超时：0，适配器：，...}数据：{结果：数组（23），总结果计数：23}个标头：{缓存控制：'无缓存，无存储，最大期限=0，必须重新验证'，连接：“保持活动”，内容类型：'application/json'，日期：“格林威治时间2023年2月16日星期四15：32：02”，到期日：“0”，...}请求：XML HTTP请求{__区域符号__xhr同步：错误，__区域符号__xhrURL：' ---为保护隐私已删除URL--- '，__区域_符号__loadendfalse：数组（1），__区域符号__ON_PROPERTY加载结束：，__区域符号__ON属性中止：，...}状态：200状态文本：“”原型：对象
正如您从控制台中看到的，我得到了一个包含23个条目的数据数组，但似乎无法将其填充到表中。
我使用state将响应数据设置为tableData，但它似乎在某种程度上改变了数据。

...但我的控制台.log（tableData）返回

[]长度：0最后索引：（...）最后一项：（...）原型：数组（0）

下面是我的API调用：

const [tableData, setTableData] = React.useState([]);
const [loading, setLoading] = React.useState(true);

React.useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
      const res = await axios.get(baseURL);
      setTableData([res.data]);
      console.log( res );
      console.log( tableData);
      } catch (error) {
      console.error(error.message);
      }
      setLoading(false);
 };
 fetchData();
 }, [baseURL, setTableData, setLoading]);

我的表

{loading ?
   <LoadingData />
   :
   (dataLength === 0 ?
   <NoResults />
  :
  tableData().map((item, id) => (
      <TableRow key={item['modelIdInfo']} >
      ... code ...
      </TableRow>
  )))
}

错误在于呈现输出的方式
您可以尝试以下方法，而不是使用三元运算符：

function App() {

const [tableData, setTableData] = React.useState([]);
const [loading, setLoading] = React.useState(true);

const fetchData = async () => {
      setLoading(true);
      try {
      const res = await axios.get(baseURL);

// You can directly use res.data to store API response data in your state
     setData(res.data);
      console.log( res );
      } catch (error) {
      console.error(error.message);
      }
      finally {
setLoading(false)
}
 };

React.useEffect(() => {
 fetchData();
 }, [baseURL, setTableData, setLoading]);

return (

// This will appear if data is fetched successfully 
{ tableData && tableData.length > 0 && 
tableData.map((item,index) => (
<TableRow key={index} >
      //... code ...
      </TableRow>
))

)

// This will be shown only if table data array length is 0
{tableData && tableData.length <1 && (<h1>No results </h1>) }

// Show loading text when fetching
{loading && (<h1>Loading</h1>) }
}

export default App;

在一个真实的的应用程序中，你可以用materialui库中的圆形进度条或者错误吐司信息来代替Loading... text

reactjs 使用Axios Async Await和Typescript从API检索数据

1条答案

相关问题

热门标签

最新问答