Memfilter Daftar Dengan React

Hmm, saya tidak melihat kelalaian saya, tetapi saya mendapatkan halaman kosong dengan kesalahan konsol yang mengatakan:

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

Rupanya saya menggunakan 'filter()' dengan tidak benar. Saya mencari-cari tetapi tidak menemukan sesuatu yang berhubungan dengan React. Adakah yang bisa membantu? Berikut adalah file-filenya:

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

Pengguna.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;
Pemrograman
filtering arrays javascript reactjs
26 April 2017 в 8:24
5 tayangan

Anda memanggil .friend pada daftar itu sendiri padahal itu adalah properti dari setiap objek dalam larik Anda. Anda juga menggunakan .filter, tetapi saya rasa Anda tidak menggunakannya dengan benar di sini. .filter akan mengembalikan sebuah larik dengan elemen-elemen tertentu di mana fungsi yang dilewatkan akan mengembalikan nilai kebenaran. Berikut'bagaimana Anda bisa melakukannya dengan .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>
);

Anda juga bisa melakukan .forEach untuk 1 kali melewati larik jika lariknya besar:

var nonFriends = [], friends = [];

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

// now render friends and nonFriends
Komentar (0)

Saya pikir, Anda mencoba memfilter atribute, dan bukan daftarnya. Cobalah untuk mengubahnya:

this.props.list.friend.filter

ke ini:

this.props.list.filter
Komentar (0)

Saya akan melakukan sesuatu seperti ini yang sedikit lebih mudah

{this.props.list.map(function (person, i) {
  {return person.friend
    ?(<li key={i}>{person.name}</li>)
    : null
  }
})}
  1. Anda mengiterasi daftar itu sendiri, bukan item dalam daftar, itulah sebabnya this.props.list.list.friend.filter tidak bekerja.
  2. Saya akan menggunakan map karena Anda tidak benar-benar memfilter daftar dalam kasus ini. Jika Anda ingin, Anda dapat memfilter daftar sebelumnya menjadi teman dan bukan teman dan memetakan item-item tersebut yang sebenarnya akan lebih mudah dilihat oleh teknisi lain.
  3. React menginginkan kunci dalam markup untuk item-item yang diiterasi yang dibuat. Itulah bagaimana React membuat hubungan antar komponen di pohon state.
Komentar (0)