Question

我构建了一个使用Axios get请求并检索电子邮件地址列表的组件。

我不知道应该在render（）里面写些什么，这样我就能在我的网站上看到电子邮件列表。

这是我的建议

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Link} from "react-router";
import axios from 'axios';

export class GetEmailsComponent extends Component {

state = {
    emails: []
}

componentDidMount(){
    //this.setState({emailList : undefined});
    axios.get('./api/EmailAddresses')
        .then(response => {
            this.setState({emails: response.data});
            console.log(response.data);
        }).catch(function (error) {
            console.log(error);
        });
}

render() { 
      return (
        <div>
            <button type = "button" onClick= {this.state.emails.map(email => <div>{email}</div>)}>GET ALL EMAILS</button>
        </div>
    );
  }
}

当我检查控制台时，会看到一系列所需的电子邮件。我正在寻找有关如何编辑代码的建议，以便它将所有这些邮件呈现到屏幕上（单击按钮后）。

谢谢。

Answer 1

在您的render方法中，您可以映射到this.state.emails上并为每封电子邮件返回一个元素（起初，数组将为空，因此也许您可以添加一个条件，这样就不会为没有理由）：

render() {
    return (
        <div>
            {this.state.emails.map(email => <div>{email}</div>)}
        </div>
    );
}

关于componentDidMount-这是React的生命周期方法。您放置在此处的所有内容都将在组件首次安装后运行。如果要在单击按钮后触发对Axios的调用，请定义其他函数（如fetchEmails），然后使用this.fetchEmails进行调用。

Answer 2

您已使用componentDidMount生命周期来做出反应以获取数据。然后您通过按钮调用了该方法。通常，我们不会调用这样的生命周期方法。我认为最好阅读react文档以了解生命周期。

您可以声明一个函数，并可以通过按钮调用该函数。请在下面找到答案。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      emails: [],
      showEmails:false,
    };
  }

  componentDidMount () {
    axios
    .get("./api/EmailAddresses")
    .then(response => {
       this.setState({ emails: response.data });
       console.log(response.data);
    })
  .catch(function(error) {
    console.log(error);
  });
}

render() {
   return (
     <div>
       <button type="button" onClick={() => this.setState({showEmail:true})}>
         Get all mails
       </button>
       {this.state.showEmail && this.state.emails.map(email => <div>{email}</div>)}
     </div>
   );
 }
}

Answer 3

将代码更改为如下所示。

单击按钮时，您需要获取电子邮件，因此您需要具有自定义事件处理程序功能，而不是componentDidMount方法。您不能将componentDidMount方法称为事件处理函数。

此外，当您以循环方式呈现电子邮件时，您需要将唯一键设置为循环内顶部元素。键可以是数据的索引或唯一ID。看来您没有来自电子邮件数组的唯一ID，因此您可以像下面那样使用index作为键

     import React, { Component } from 'react';
     import PropTypes from 'prop-types';
     import {Link} from "react-router";
     import axios from 'axios';

     export class GetEmailsComponent extends Component {

     state = {
        emails: []
     }

  getEmails = () =>{
       //this.setState({emailList : undefined});
       axios.get('./api/EmailAddresses')
         .then(response => {
             this.setState({emails: response.data});
             console.log(response.data);
         }).catch(function (error) {
            console.log(error);
        });
    }

     render() { 
           return (
                <div>
                    <ul>
                      {this.state.emails.map((email, index)=> <li key={"Key-"+index}>{email}</li>)}
                     </ul>
                    <button type="button" onClick={()=> this.getEmails()}>Get all mails</button>
                </div>
                 )
            }
         }

将获取的数据呈现到屏幕

3 个答案: