うーん、省略は見られませんが、コンソールエラーが表示された空白のページが表示されます。
Users.js:9 Uncaught TypeError: Cannot read property 'filter' of undefined
at Users.render (Users.js:9)
どうやら 'filter()'を不適切に使用しているようです。見回したが、「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;
さて、「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;
配列内の各オブジェクトのプロパティである場合、リスト自体で.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>
);
配列が大きい場合は、配列を1回パスする.forEach
を実行することもできます。
var nonFriends = [], friends = [];
this.props.list.forEach(function (user) {
if (user.friend) {
friends.Push(user);
} else {
nonFriends.Push(user);
}
});
// now render friends and nonFriends
リストではなく、属性をフィルタリングしようとしていると思います。これを変更してみてください:
this.props.list.friend.filter
これに:
this.props.list.filter
私は代わりにこのようなことをするでしょう、それはもう少し簡単です
{this.props.list.map(function (person, i) {
{return person.friend
?(<li key={i}>{person.name}</li>)
: null
}
})}
this.props.list.friend.filter
は機能しませんでした。key
sを必要とします。 Reactは、状態ツリーのコンポーネント間の関係を作成します。