Question

我正在将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);
}

Answer 1

这是一个使用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>

Answer 2

创建一个处理函数以帮助您。然后，当您收到所有需要的东西时使用它。函数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>
    );
  }
}

如何像社交媒体源一样以Javascript输出数组？

2 个答案: