如何在 const 中获取数据（Reactjs + JSX）答案

【问题标题】：How to fetch data inside a const (Reactjs + JSX)如何在 const 中获取数据（Reactjs + JSX）
【发布时间】：2020-02-02 08:05:32
【问题描述】：

我试图弄清楚如何让数据显示在下面，但是我没有成功。

我想知道我该如何输入以下内容

componentDidMount() {
    const xhr = new XMLHttpRequest();
    xhr.open('get', '/api-access/programs');
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    // set the authorization HTTP header
    xhr.responseType = 'json';
    xhr.addEventListener('load', () => {
      if (xhr.status === 200) {
        this.setState({
          Data: xhr.response.programs
        });
      }
    });
    xhr.send();
  }

在下面。然后我基本上需要能够添加

{items.map(item => (
          <ShowCard title={item.title} link={item.url} icon={item.icon}/>  
        ))}

到下面。

const Dashboard = ({ secretData, user }) => (
  <div>
  <Card className="container">
    <CardTitle
      title="Pages"
      subtitle="You should get access to this page only after authentication."
    />
  {secretData && <CardText style={{ fontSize: '16px', color: 'green' }}>Welcome <strong>{user.name}</strong>!<br />{secretData}</CardText>}

  <Table>
<TableHeader>
  <TableRow>
    <TableHeaderColumn>ID</TableHeaderColumn>
    <TableHeaderColumn>Page Title</TableHeaderColumn>
    <TableHeaderColumn>Last Edited</TableHeaderColumn>
  </TableRow>
</TableHeader>
<TableBody>
  <TableRow>
    <TableRowColumn>1</TableRowColumn>
    <TableRowColumn>John Smith</TableRowColumn>
    <TableRowColumn>Employed</TableRowColumn>
  </TableRow>
  <TableRow>
    <TableRowColumn>2</TableRowColumn>
    <TableRowColumn>Randal White</TableRowColumn>
    <TableRowColumn>Unemployed</TableRowColumn>
  </TableRow>
  <TableRow>
    <TableRowColumn>3</TableRowColumn>
    <TableRowColumn>Stephanie Sanders</TableRowColumn>
    <TableRowColumn>Employed</TableRowColumn>
  </TableRow>
  <TableRow>
    <TableRowColumn>4</TableRowColumn>
    <TableRowColumn>Steve Brown</TableRowColumn>
    <TableRowColumn>Employed</TableRowColumn>
  </TableRow>
  <TableRow>
    <TableRowColumn>5</TableRowColumn>
    <TableRowColumn>Christopher Nolan</TableRowColumn>
    <TableRowColumn>Unemployed</TableRowColumn>
  </TableRow>
</TableBody>
</Table>
  </Card>
</div>
);

Dashboard.propTypes = {
  secretData: PropTypes.string.isRequired
};

export default Dashboard;

【问题讨论】：

您提供的三段代码似乎没有相互关联。从外观上看，您已经在网上找到了一些 sn-ps - 一个从 API 获取数据，以及一个可以呈现该数据的组件 - 您正在尝试将它们组合起来吗？那准确吗？（取数据位未经修改与功能组件不兼容）

标签： reactjs jsx

【解决方案1】：

我不太清楚您要完成什么，但我认为您正在尝试调整 componentDidMount 方法以在带有钩子的功能组件中工作？

如果是这样，您希望将该方法放在带有空依赖数组的 useEffect 挂钩中：

useEffect(() => {
    const xhr = new XMLHttpRequest();
    xhr.open('get', '/api-access/programs');
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    // set the authorization HTTP header
    xhr.responseType = 'json';
    xhr.addEventListener('load', () => {
      if (xhr.status === 200) {
        setData(xhr.response.programs)
      }
    });
    xhr.send();
}, [])

您还想用useState 定义一个状态来存储数据：

const [data, setData] = useState(null);

我不知道items 上的映射与您的其他问题有何关联。这些数据来自哪里，它需要在哪里？与您从 get 请求中获得的数据相同吗？

【讨论】：

也许使用fetch 而不是xhr。后者已经过时了，而 React 项目默认支持前者。