用 React 过滤列表

嗯，我没有看到我的疏忽，但我得到了一个控制台错误提示的空白页面：

Users.js:9 Uncaught TypeError: Cannot read property 'filter' of undefined
    at Users.render (Users.js:9)

显然，我使用 'filter()'不当。我四处寻找，但没有找到任何与 'React'相关的内容。谁能帮帮我？以下是文件：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Users from './Users';

ReactDOM.render(
  <Users list={[
    { name: 'Tyler', friend: true },
    { name: 'Ryan', friend: true },
    { name: 'Michael', friend: false },
    { name: 'Mikenzie', friend: false },
    { name: 'Jessica', friend: true },
    { name: 'Dan', friend: false }
    ]}
  />,
  document.getElementById('root')
);

Users.js

import React from 'react';

class Users extends React.Component {
  render() {
    return (
      <div>
        <h1>Friends:</h1>
        <ul>
          {this.props.list.friend.filter(function (friend) {
            return <li>{friend[0] === 'true'}</li>
        })}
        </ul>

        <hr />

        <h1>Non Friends:</h1>
        <ul>
          {this.props.list.friend.filter(function (nonFriend) {
            return <li>{nonFriend[0] === 'false'}</li>
          })}
        </ul>
      </div>
    );
  }
}

export default Users;
编程
filtering arrays javascript reactjs
26日 四月 2017 в 8:24
尚无意见

你在列表本身上调用了 .friend，而这是数组中每个对象的属性。你还使用了 .filter，但我不认为你在这里正确地使用了它。.filter会返回一个包含特定元素的数组，其中传入的函数会返回一个真值。下面是使用 .filter 的方法：

var nonFriends = this.props.list.filter(function (user) {
  return !user.friend;
});

var friends = this.props.list.filter(function (user) {
  return user.friend;
});

return (
  <div>
    <h1>Friends:</h1>
    <ul>{ friends }</ul>
    <h1>Non Friends:</h1>
    <ul>{ nonFriends }</ul>
  </div>
);

如果数组较大，也可以使用.forEach对数组进行一次遍历：

var nonFriends = [], friends = [];

this.props.list.forEach(function (user) {
  if (user.friend) {
    friends.push(user);
  } else {
    nonFriends.push(user);
  }
});

// now render friends and nonFriends
评论(0)

我认为您试图过滤的是属性，而不是列表。请尝试更改：

this.props.list.friend.filter

改为

this.props.list.filter
评论(0)

我的做法是这样的，这样更直接一些

{this.props.list.map(function (person, i) {
  {return person.friend
    ?(<li key={i}>{person.name}</li>)
    : null
  }
})}

1.您正在遍历列表本身，而不是列表中的某个项目，这就是为什么 this.props.list.friend.filter 没有起作用的原因。 2.我会使用 map，因为在这种情况下，你实际上并没有过滤列表。如果您愿意，可以事先将列表过滤为好友和非好友，然后将这些项目映射到其他工程师看到的列表中，这样会更直接。 3.React 希望在标记中为创建的迭代项设置 "key"。这就是 React 在状态树中创建组件间关系的方式。

评论(0)