Reactで、お気に入りに追加機能を作っています。
機能としては、名前横のアイコンをクリックし、お気に入りに追加するというものです。
もしもう一度アイコンをクリックすると、toggleされて、likesからは外されます。
その中で、いくつか上手くいかない点があります。
①
toggleが正常に動いていません。1番目をクリックし、2番目をクリックし、さらにもう1回2番目をクリックすると、なぜか1番目が消えてしまいます。
②
console.log("this.state.likes", this.state.likes); でstateのlikes arrayを見てみると、1個前にクリックしたelementが表示されます。どうしてこのようなことが起こるのでしょうか?
どなたかお力をお貸しいただければ幸いです。
import React from 'react'; import axios from 'axios'; import IcoMoon from 'react-icomoon'; export default class PersonList extends React.Component { state = { persons: [], likes: [] } componentDidMount() { axios.get(`https://jsonplaceholder.typicode.com/users`) .then(res => { const persons = res.data; this.setState({ persons }); }) } handleClick = person => { if (this.state.likes.includes(person)) { this.setState({ likes: this.state.likes.splice(this.state.likes.indexOf(person), 1) }); console.log("included", this.state.likes); return; } this.setState({ likes: [...this.state.likes, person] }); console.log("this.state.likes", this.state.likes); }; likesTemplate = item => <li key={item}>{item}</li>; renderLikes = () => { return this.state.likes.map(i => this.likesTemplate(i)); } render() { return ( <div> {this.state.persons.map(person => { return <li key={person.name}><IcoMoon icon="heart" onClick={() => {this.handleClick(person.name)}} />{person.name}</li>} )} <h2>Favorite Person</h2> <ul> {this.renderLikes()} </ul> </div> ) } }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/06 10:37
2019/06/06 11:50
2019/06/06 12:34