Reactでリストをフィルタリングする

うーん、私の脱字は見当たりませんが、コンソールエラーで真っ白なページが表示されます：

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

どうやら 'filter()' の使い方が間違っているようです。というコンソールエラーが出ます。どなたか教えてください。ここにファイルがあります：

<!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')
);

ユーザー

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日 4月 2017 в 8:24
まだビューはありません
質問へのコメント (1)
ソリューション

さて、「Users.js」は次のようになります。

import React from 'react';

class Users extends React.Component {
  render() {
    let friends = this.props.list.filter( function (user) {
      return user.friend === true
    });

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

    return (
      <div>
        <h1>Friends:</h1>
        <ul>
          {friends.map(function (user) {
            return <li key={user.name}>{user.name}</li>
          })}
        </ul>
        <h1>Non Friends:</h1>
        <ul>
          {nonFriends.map(function (user) {
            return <li key={user.name}>{user.name}</li>
          })}
        </ul>
      </div>
    );
  }
}

export default Users;

またはこれ:

import React from 'react';

class Users extends React.Component {
  render() {
    return (
      <div>
        <h1>Friends:</h1>
        <ul>
          {this.props.list.filter(function (user) { // filter first for friends
            return user.friend === true // returns a new array
          }).map(function (user) {  // map the new array to list items
            return <li key={user.name}>{user.name}</li> // don't forget unique key for each item
          })}
        </ul>

        <hr />

        <h1>Non Friends:</h1>
        <ul>
          {this.props.list.filter(function (user) { // filter first for non-friends
            return user.friend !== true // returns a new array
          }).map(function (user) {  //map the new array to list items
            return <li key={user.name}>{user.name}</li> // don't forget unique key for each item
          })}
        </ul>
      </div>
    );
  }
}

export default Users;
解説 (0)

.friendは配列の各オブジェクトのプロパティであるにもかかわらず、リスト自体に対して.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 で配列を1回通過させることもできます：

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.2.この場合、実際にリストをフィルタリングしているわけではないので、私ならmapを使います。もしそうしたいのであれば、リストをあらかじめ友人とそうでないものにフィルタリングしておき、それらのアイテムをマップすることができます。 3.Reactは、繰り返し作成されるアイテムのマークアップに「キー」を求めている。これは、Reactがステートツリー内のコンポーネント間の関係を作成する方法です。

解説 (0)