Как получить информацию из базы данных на сайт React

Question

Я создаю сайт, используя ReactJs и Node.В панели администратора я хочу построить таблицу с именами пользователей и письмами.Но ... я не знаю, как получить информацию о пользователях из базы данных.

Я использую локальную базу данных localhost: 8080 / user /.

В таблице у меня есть информация - имя и адрес электронной почтыв настоящее время вошли в систему администратора.

// моя таблица

<table border = "4" cellpadding = "10">
   <tr><td>UserName</td><td>E-mail</td></tr>
   <tr><td>{isAuthenticated().user.name}</td><td>{isAuthenticated().user.email}</td></tr>
</table>

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

Answer 1

Вы можете использовать API выборки для получения этих данных с сервера и вызывать метод fetchData() через ловушку жизненного цикла componentWillMount(), чтобы отправить запрос на сервер перед монтированием страницы, затем вы можете выполнить итерацию каждого из элементов в данных с использованием метода map() в элементе таблицы.

export default class myApp extends React.Component  {

   constructor(props) {
     super(props);

      this.state = {
         data: []
      };
    }

    componentWillMount() {
       this.fetchData();
    }

    fetchData(){
      fetch('https://localhost:8080/user/')
       .then((response) => response.json())
         .then((responseToJson) => {
            this.setState({ data: responseToJson })
          })
          .catch((error) => {
            console.error(error);
          });
     }

     render(){
       const { data } = this.state.data
       return(
         <div>
          {data.map((item, index) => {
           return(
            <div key={index}>
              <table border="4" cellpadding="10">
                 <tr><td>UserName</td><td>E-mail</td></tr>
                 <tr><td>{data.name}</td><td>{data.email}</td></tr>
              </table>
            </div>
            )
           })}
          </div>
        );
      }
   }