如何在React中从数组中渲染随机对象？

Question

我刚开始学习React，并需要使用React来构建一个博客。我需要展示随机的帖子作为“推荐文章”。经过一些研究，我发现了一个可能的解决方案，即使用Math.random()，但我不知道如何在我的组件中实现它。

以下是我的代码:

RecommendedPost/index.js

import React from 'react';
import { Link } from 'react-router';

class RecommendedPosts extends React.Component {

render() {
return (
  <ul>
    {this.props.posts.map((post, idx) => {
      return (
        <li key={idx}>
          <p>{post.title}</p>
          <p>{post.text}</p>
          <p>{post.category}</p>
          <Link to={`/blog/post-1/:${post.id}`}>Weiter lesen</Link>
        </li>
      );
    })}
  </ul>
);
}
}
RecommendedPosts.propTypes = {
posts: React.PropTypes.array,
};
export default RecommendedPosts;

然后我在我的容器中使用这个组件：BlogPage/SinglePostPage/index.js

import React from 'react';
// ...other imported stuff
import RecommendedPosts from 'components/Blog/RecommendedPosts';

class PostPage extends React.Component {

render() {
  // dummy-recomended-posts
const posts = [
  {
    id: 1,
    title: 'How to Cook Blue Meth',
    description: 'Lorem ipsum dolor sit amet, turpis at, elit',
    thump: 'thump.jpg',
    hero: '/img/',
    category: 'k1',
    fullname: 'Walter White',
    published: '10.05.2016, 15:30pm',
  },
  {
    id: 2,
    title: 'Passenger',
    description: 'Lorem ipsum dolor sit amet, turpis at, elit',
    thump: 'thump.jpg',
    hero: '/img/',
    category: 'k2',
    fullname: 'Chino Moreno',
    published: '10.05.2016, 15:30pm',
   },
    // ...and more dummy posts(about 7)
   ];
return (
   <div>
   // here, I pass the posts array to my component
   <RecommendedPosts posts={posts} />
   </div>
  );
  }
 }
}
export default connect(null, mapDispatchToProps)(PostPage);

我的想法是使用ID作为参考，随机渲染帖子，但我又找不到方法。

希望有人能够帮我，如果答案对大家来说过于显而易见，那么请原谅。

- Marco Chavez

Answer 1

我已经为您创建了一个可运行的示例。

import React from 'react';
import { Link } from 'react-router';

function shuffleArray(array) {
  let i = array.length - 1;
  for (; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    const temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  return array;
}

class RecommendedPosts extends React.Component {
  render() {
    const shuffledPosts = shuffleArray(this.props.posts);
    return (
      <ul>
        {shuffledPosts.map((post) => {
          return (
            <li key={post.id}>
              <p>{post.title}</p>
              <p>{post.text}</p>
              <p>{post.category}</p>
              <Link to={`/blog/post-1/:${post.id}`}>Weiter lesen</Link>
            </li>
          );
        })}
      </ul>
    );
  }
}
RecommendedPosts.propTypes = {
  posts: React.PropTypes.array,
};
export default RecommendedPosts;

额外提示 - 由于您没有使用状态或生命周期，因此可以创建一个更简单的函数组件，如下所示：

import React from 'react';
import { Link } from 'react-router';

function shuffleArray(array) {
  let i = array.length - 1;
  for (; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    const temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  return array;
}

function RecommendedPosts({ posts }) {
  const shuffledPosts = shuffleArray(posts);
  return (
    <ul>
      {shuffledPosts.map((post) => {
        return (
          <li key={post.id}>
            <p>{post.title}</p>
            <p>{post.text}</p>
            <p>{post.category}</p>
            <Link to={`/blog/post-1/:${post.id}`}>Weiter lesen</Link>
          </li>
        );
      })}
    </ul>
  );
}
RecommendedPosts.propTypes = {
  posts: React.PropTypes.array,
};
export default RecommendedPosts;

- Grgur

---

那真是太棒了！非常感谢！还要感谢所有帮助改进这个问题的人！我想我有很多东西要学习，我想尝试使用状态和生命周期来完成这个问题！ - Marco Chavez

key={idx} 会导致在每次重新渲染RecommendedPosts时卸载和重新安装子组件，如果我们为每个子元素使用固定的Key（比如每个子元素的原始索引）则可以避免这种情况。 - Harsh kurra

Answer 2

在您的推荐帖子中，首先对帖子进行洗牌并将其存储在状态中，然后再渲染。

import React from 'react';
import { Link } from 'react-router';

class RecommendedPosts extends React.Component {

constructor() {
super(props);
this.state = {
posts: this.shuffle(this.props.posts)
}
}

shuffle(posts){
 ///shuffle using some algo
return posts
}

render() {
return (
  <ul>
    {this.state.posts.map((post, idx) => {
      return (
        <li key={idx}>
          <p>{post.title}</p>
          <p>{post.text}</p>
          <p>{post.category}</p>
          <Link to={`/blog/post-1/:${post.id}`}>Weiter lesen</Link>
        </li>
      );
    })}
  </ul>
);
}
}
RecommendedPosts.propTypes = {
posts: React.PropTypes.array,
};
export default RecommendedPosts;

- Piyush.kapoor

---

在构造函数中使用 props 是一种反模式。只需在渲染顶部洗牌帖子：const postsToRender = this.shuffle(this.props.posts)。如果您真的想将其存储在状态中，则在 componentWillMount 和 componentWillReceiveProps 中进行洗牌。 - Brandon

Answer 3

你可以使用 lodash 的 shuffle 函数来随机排列数组，然后通过从该数组中获取数据来简单地渲染。

- Vikramaditya