Рендеринг выбранных данных на экран

Question

Я создал компонент, который использует запрос получения Axios и извлекает список адресов электронной почты.

Я не знаю, что мне писать в 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

Вы использовали componentDidMount жизненный цикл в реакции на получение данных.И вы вызвали этот метод с помощью кнопки.Обычно мы не вызываем такие методы жизненного цикла.я думаю, что лучше прочитать документацию по реагированию, чтобы получить представление о жизненных циклах.

Вы можете объявить функцию и вызвать эту функцию с помощью кнопки.Пожалуйста, найдите ответ ниже.

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 2

Измените свой код на что-то вроде ниже.

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

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

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

Answer 3

Внутри вашего метода рендеринга вы можете отобразить более this.state.emails и вернуть элемент для каждого письма (сначала массив будет пустым, поэтому, возможно, вы можете добавить условие, чтобы вы не отображали пустой div без причины).) Что-то вроде:

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

Что касается componentDidMount - это метод React на протяжении жизненного цикла.Все, что вы там поместите, будет запущено после первого монтирования компонента.Если вы хотите инициировать вызов Axios после нажатия кнопки, определите другую функцию (например, fetchEmails) и вызовите ее, используя this.fetchEmails.