過濾一個列表與之反應

嗯，我看不到我的疏忽，但我得到了一個空白頁面，控制檯錯誤說：過濾一個列表與之反應

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

顯然，我使用的是「過濾器（）」不當。我環顧四周，但沒有發現任何'React'相關的東西。誰可以幫忙？以下是文件：

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

來源

2017-04-26 Ron Allen Smith

只是好奇，什麼是你想用'完成{朋友[0 ] ==='true'}'？ –

好吧，看起來像「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;

來源

2017-04-27 20:05:54

我認爲你正試圖過濾屬性附加傷害，而不是名單。嘗試改變這一點：

this.props.list.friend.filter

這樣：

this.props.list.filter

來源

2017-04-26 20:34:13

您列表本身上調用.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

來源

2017-04-26 20:44:37 Vinay

我會做這樣的事情，而不是它是多一點簡單

{this.props.list.map(function (person, i) { 
    {return person.friend 
    ?(<li key={i}>{person.name}</li>) 
    : null 
    } 
})}

您遍歷目錄本身，而不是一個項目列表中的w ^這就是爲什麼this.props.list.friend.filter沒有工作。
我會使用地圖，因爲在這種情況下，您實際上並未過濾列表。如果你想要，你可以事先將列表過濾到朋友和非朋友，並映射那些實際上更直接讓其他工程師看到的項目。
React想要key s在創建迭代項目的標記中。這就是React如何創建狀態樹中組件之間的關係。

來源

2017-04-26 20:53:44 oftenfrequent

過濾一個列表與之反應

回答

相關問題