Как вывести массив в Javascript, как канал социальной сети? - PullRequest
Новая
       8

Как вывести массив в Javascript, как канал социальной сети?

0 голосов
/ 22 октября 2018

Я использую React для своего приложения и помещаю свои данные (объекты) в массив.Есть ли способ вывести мои данные (массив объектов), которые загружаются одновременно (например, Twitter, Instagram, Facebook)?

В настоящее время я использую цикл for, где он загружается один за другим из моегопоследний пост до конца.

Вот пример цикла для демонстрации. 

var myArray = [
    {name: 'Dwayne', age: 28},
    {name: 'Rob', age: 32},
    {name: 'Marie', age: 22},
    {name: 'Sarah', age: 40},
    {name: 'Emma', age: 29},
    {name: 'James', age: 30}
];

for (var i = myArray.length - 1; i >= 0; i--){
    console.log(myArray[i].name, myArray[i].age);
}

Ответы [ 2 ]

0 голосов
/ 22 октября 2018

Создайте функцию обработчика, чтобы помочь вам.Затем используйте это, когда вы получите все, что вам нужно.функция ComponentDidMount поможет вам.А с массивом вы используете функцию .map () , чтобы помочь вам.

Вот пример: 

import React, { Component } from 'react';

class ShowMyItmes extends Component {
  constructor(props) {
    super(props);
    this.state = {
      peoples: [],

    };
  }

  componentDidMount() {
    this.setState({
      peoples: renderAllReceived(this.props.peoples),
    })
  }

  renderAllReceived(peoples) {
    if (peoples.isArray()) {
      const allImplemented = peoples.map((element, i) => {
        <div key={`${element.name}-${i}`}>
          <p>{`NAME: ${element.name}  AGE:${element.age}`}</p>
        </div>
      });

      return allImplemented;
    }
    console.log(("Is not possible get it"));
    return false
  }

  render() {
    return (
      <div>
        { this.state.peoples }
      </div>
    );
  }
}
0 голосов
/ 22 октября 2018

Вот пример использования map для генерации элемента <p/> с именем и возрастом внутри него. 

render(){
  const myArray = [
    {name: 'Dwayne', age: 28},
    {name: 'Rob', age: 32},
    {name: 'Marie', age: 22},
    {name: 'Sarah', age: 40},
    {name: 'Emma', age: 29},
    {name: 'James', age: 30}
  ];
  return(
    <div>
      {myArray.map((item, index) => (
        <p key={`${item.name}-${index}`}>
          Name:{item.name}, Age:{item.age}
        </p>
      ))}
    </div>
  )
}

Приведенный выше код выведет 

<div>
  <p>Name:Dwayne, Age:28</p>
  <p>Name:Rob, Age:32</p>
  <p>Name:Marie, Age:22</p>
  <p>Name:Sarah, Age:40</p>
  <p>Name:Emma, Age:29</p>
  <p>Name:James, Age:30</p>
</div>
...