kzen.dev
Lebih
Question

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
Pertanyaan ini memiliki :value jawaban dalam bahasa Inggris, untuk membacanya masuk ke akun Anda.

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
4
Anda punya pertanyaan? Tambahkan di situs dan dapatkan jawabannya secara instan
id.kzen.dev

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

this.props.list.friend.filter

ke ini:

this.props.list.filter
2
Anda punya pertanyaan? Tambahkan di situs dan dapatkan jawabannya secara instan
id.kzen.dev

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.
2
Related communities 4
JavaScript Indonesia
16 606 pengguna
Grup JavaScript yang membahas JavaScript, framework JS, dan Node JS secara universal. Cek Pinned Message untuk keterangan lebih lanjut. Komunitas ReactJS: https://t.me/react_idn
ReactJS Indonesia
13 155 pengguna
Website: https://reactjs.id Roadmap: http://bit.ly/roadmapReact Grup Terkait: * JavaScript ID: https://t.me/js_id * React Native ID: @reactnativeindo Pembahasan OOT di luar React & JavaScript: * Software Engineer ID: https://t.me/soft_eng_id
[archived] React Native Indonesia
8 822 pengguna
React Native Indonesia informasi : https://telegra.ph/React-Native-ID-12-05 React Js Indonesia https://t.me/react_idn For global group : @Reactnativeglobal ReactJS : @react_id
ReactJs Indonesia
95 pengguna
ReactJs telegram group for learn and for expert to share their knowledge