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>
        );
      }
   }

如何从数据库获取信息到React网站

1 个答案: