react接口返回的数据如何渲染？

Question

好久没用react了 看着好生疏 如图所示 这个res为什么不能循环

Answer 1

使用useState

Answer 2

在 React 中，可以通过在组件中调用接口获取数据，然后将数据渲染到页面上。

通常情况下，我们会在组件的 componentDidMount 生命周期方法中调用接口获取数据，然后将数据存储在组件的状态（state）中。在组件的 render 方法中，我们可以根据状态中存储的数据来动态渲染页面。

以下是一个示例：

jsx
Copy code
import React from 'react';

class MyComponent extends React.Component {
constructor(props) {

super(props);
this.state = {
  data: [],
  loading: true,
  error: null,
};

}

componentDidMount() {

fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    this.setState({ data, loading: false });
  })
  .catch(error => {
    this.setState({ error, loading: false });
  });

}

render() {

const { data, loading, error } = this.state;

if (loading) {
  return <div>Loading...</div>;
}

if (error) {
  return <div>Error: {error.message}</div>;
}

return (
  <ul>
    {data.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

}
}

export default MyComponent;
在上面的示例中，我们在组件的 componentDidMount 方法中使用 fetch 方法获取数据，并将数据存储在组件的状态中。在 render 方法中，我们根据组件的状态来动态渲染页面。在数据还在加载的时候，我们展示一个“Loading...”的信息，如果加载数据出现错误，我们展示一个错误信息。最后，如果数据加载成功，我们使用 map 方法遍历数据，并将数据渲染成列表项。