Rendering неправдоподобных данных на экран

голоса
1

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

Я не знаю, что я должен написать в визуализации (), так что я буду иметь возможность видеть список электронных писем через мой сайт.

Это мое предложение:

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

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

Спасибо об этом заранее.

Задан 27/11/2018 в 15:02
источник пользователем
На других языках...                            


3 ответов

голоса
3

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

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

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

Ответил 27/11/2018 в 15:06
источник пользователем

голоса
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>
   );
 }
}
Ответил 27/11/2018 в 15:19
источник пользователем

голоса
0

Измените код на что-то, как показано ниже.

Вы должны получить электронную почту, когда кнопка нажата, так что вам нужно иметь собственный обработчик события для этого, но не 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>
                 )
            }
         }
Ответил 27/11/2018 в 15:41
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more