Как получить данные внутри const (Reactjs + JSX)

Question

Я попытался выяснить, как получить данные для показа в следующем, однако у меня ничего не получилось.

Мне интересно, как мне поместить следующее

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;

Answer 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 относится к остальным вашим вопросам. Откуда поступают эти данные и где они должны быть? Это те же данные, которые вы получаете из запроса на получение?