Блог

У меня есть базовое приложение react, в котором я хотел бы отображать результаты из моего API, который подключен к моей базе данных.

В настоящее время у меня есть метод выборки, который вызывает мой api, в консоли я вижу, что он содержит правильные данные из базы данных, но я не уверен, как отобразить его в react, не могли бы вы помочь? У меня есть следующий код:

 import React, { useEffect, useState } from 'react';

function DisplayCases(props) {

  const [appState, setAppState] = useState({
    loading: false,
    repos: null,
  });

  useEffect(() => {
    setAppState({ loading: true });
  const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "<my api url>" ;
fetch(proxyurl   url) 
      .then((res) => res.json())
      .then(contents => console.log(contents))
      .then((repos) => {
        setAppState({ loading: false, repos: repos });
      });
  }, [setAppState]);


  return (
      <div className='container'>
        <h1>Welcomme {props.location.state}, here are your open cases:</h1>
    <p> {appState.repos}</p>
    </div>
  );
}

export default DisplayCases;
  

На данный момент

AppState.repos вообще ничего не отображает, но (contents => console.log(contents)) содержит информацию, которую я хочу отобразить («случаи» включают имя клиента, фамилию клиента и т. Д.) Я хочу, чтобы он отображался как список, если это возможно.

Лучше всего создавать другой .then только при выполнении асинхронного действия, иначе вы создаете больше синтаксического шума и потенциальных ошибок, подобных этой. Поскольку console.log ничего не возвращает, этот раздел:

 .then(contents => console.log(contents))
.then((repos) => {
  setAppState({ loading: false, repos: repos });
});
  

передает возвращаемое значение console.log следующему .then , которое есть undefined . Изменить на:

 .then((repos) => {
  console.log(repos);
  setAppState({ loading: false, repos: repos });
});
  

Или, что еще лучше, loading полностью удалите свойство и просто проверьте, repos существует оно или нет, если вам нужно будет сделать это позже.

 const [repos, setRepos] = useState();
// ...
.then(res => res.json())
.then(setRepos)
.catch(handleErrors); // don't forget to handle errors
// ...

<p> {repos}</p>
  

Помните, что состояние функционального компонента обычно следует разделять на отдельные переменные, когда это возможно, если они относятся к отдельным вещам — наличие одной главной переменной состояния вместо этого немного противоречит шаблону.