Filtrage D'Une Liste À Réagir
Hmm, je ne vois pas mon omission, mais j'obtiens une page blanche avec une erreur de la console en disant:
Users.js:9 Uncaught TypeError: Cannot read property 'filter' of undefined
at Users.render (Users.js:9)
Apparemment, je suis en utilisant le filtre " ()' mal. J'ai regardé autour de lui, mais ne trouve rien 'Réagir' liés. Quelqu'un peut-il aider? Voici les fichiers:
<!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;
- juste curieux de savoir ce que vous essayez d'accomplir avec
{friend[0] === 'true'}
?
Vous devez vous connecter pour publier un commentaire.
Vous appelez
.friend
sur la liste elle-même quand c'est une propriété de chaque objet dans votre tableau. Vous êtes également à l'aide de.filter
, mais je ne pense pas que vous l'utilisez correctement ici..filter
retournera un tableau avec certains éléments où la fonction passée en renvoie une truthy valeur. Voici comment vous pourriez le faire avec.filter
:Vous pouvez également faire une
.forEach
pour 1 passer à travers le tableau si le tableau est grand:Bon, on dirait "Users.js" doit être:
Ou même ceci:
Je pense que vous essayez de filtrer l'attribut, et non pas la liste. Essayez de changer ce:
à ceci:
Je voudrais faire quelque chose comme ceci à la place qui est un peu plus simple
this.props.list.friend.filter
n'a pas fonctionné.key
s dans le balisage de la itéré des éléments créés. C'est comment Réagir crée les relations entre les composants dans l'état de l'arbre.