Filtern Einer Liste Mit Reagieren

Hmm, ich sehe nicht ein, meine Unterlassung, aber ich bekomme eine leere Seite mit einer Konsole Fehler sagen:

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

Scheinbar bin ich mit 'filter()' falsch. Ich schaute mich um konnte aber nichts finden 'Reagieren' verwandt. Kann Jemand helfen? Hier sind die Dateien:

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

einfach nur neugierig, was Sie versuchen zu erreichen, mit {friend[0] === 'true'}?

InformationsquelleAutor Ron Allen Smith | 2017-04-26

Wird, die Sie anrufen .friend auf der Liste selbst wenn, dass ist eine Eigenschaft jedes Objekt im array. Sie sind auch mit .filter, aber ich glaube nicht, dass Sie die korrekte Verwendung der hier. .filter wird ein array zurückgeben, mit bestimmten Elementen, wobei die übergebene Funktion in liefert einen Wert truthy. Hier ist, wie Sie es tun konnte, mit .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>
);

Sie könnte auch tun, eine .forEach für 1 Durchlauf durch das array, wenn das array groß ist:

var nonFriends = [], friends = [];

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

//now render friends and nonFriends

InformationsquelleAutor Vinay

Okay, sieht aus wie "Users.js" sollte sein:

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;

Oder auch dieses:

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;

InformationsquelleAutor Ron Allen Smith

2

Ich denke, dass Sie versuchen, filtern die atribute, und nicht die Liste. Versuchen Sie, dies zu ändern:
```
this.props.list.friend.filter
```
:
```
this.props.list.filter
```
InformationsquelleAutor Ariel Jr
2

Ich würde so etwas tun, statt die ist ein wenig einfacher
```
{this.props.list.map(function (person, i) {
  {return person.friend
    ?(<li key={i}>{person.name}</li>)
    : null
  }
})}
```
1. Sie sind der Iteration über die Liste selbst, nicht auf ein Element in der Liste, die ist, warum this.props.list.friend.filter hat nicht funktioniert.
2. Würde ich anzeigen, weil Sie nicht tatsächlich die Filterung der Listen, in diesem Fall. Wenn Sie wollten, könnten Sie die Liste filtern, vorher in Freunde und nicht-Freunde und anzeigen über die Elemente, die müsste eigentlich einfacher sein, für einen anderen Ingenieur zu sehen.
3. Reagieren will keys in das markup für die iterierten Elemente erstellt. Das ist, wie Reagieren, schafft die Beziehungen zwischen den Komponenten in den Zustand Baum.
InformationsquelleAutor oftenfrequent

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.