反応.map関数内の要素を1つだけ変更する方法は？

Question

私は少し新しく反応して、ここで何をするのか少し失われました。私はfirebaseからデータを読み込み、そのオブジェクトの小道具を.map関数を使ってレンダリングして、ページ上のすべての「コメント」を表示します。これはうまくいきます。また、ユーザーが個々のコメント（マップ内の特定の要素）に返信できるようなコンポーネントを呼びたいと思っていますが、このコードが期待するとおり、返信ボタンをクリックすると、呼び出されたコンポーネントがこれは望ましくない。この場合、マップの1つの要素だけコンポーネントを呼び出すことができますか？

changeIsReply() { 
    this.setState(
    {isReply: !this.state.isReply,} 
); 
}  

    render() { 

    return (
    <div> 
    <ul className="list-group"> 
    {Object.values(this.props.commentInfo).map((data) => 
     data.map((secondData, i) => 
     <div className="commentHolder" key={i}> 
      <p>{secondData.text}</p> 
      <p>{secondData.category}</p> 
      <p>{secondData.organization}</p> 
      <button> UpButton </button> <br /> 
      <button> DownButton </button> 
      <button onClick = {this.changeIsReply} > Reply </button> 
      {this.state.isReply ? <SetComment id={secondData.key} /> : null} 
     </div> 
    ) 
    )} 
    </ul> 
    </div> 
) 
} 

Answer 1

これは、すべてのコメントに単一の状態を使用しているためです。

<button onClick = {() => this.changeIsReply(secondData.key)} > Reply </button>

​​

と（自分のchangeIsReplyを変更）へ：

changeIsReply(clickedId) { 
    this.setState(
    {isReply: !this.state.isReply, clickedComment: clickedId} 
);} 

これが動作するかどうかを参照してください。コンストラクタに新しい状態を追加することを忘れないでください。

Answer 2

代わりに、どのコメントにSetCommentコンポーネントが必要かを把握することができます。このアプローチで

constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
    // init commentReplyIds as empty array 
 
    commentReplyIds : [], 
 
    // ... rest of your state 
 
    } 
 
} 
 

 
changeIsReply(commentId) { 
 
    const newCommentReplyIds = [...this.state.commentReplyIds. commentId]; 
 
    this.setState(
 
    {commentReplyIds: newCommentReplyIds} 
 
); 
 
}  
 

 
    render() { 
 
    // in here I am using the data.text as the unique id of each comment, you can use other serializable value. 
 
    return (
 
    <div> 
 
    <ul className="list-group"> 
 
    {Object.values(this.props.commentInfo).map((data) => 
 
     data.map((secondData, i) => 
 
     <div className="commentHolder" key={i}> 
 
      <p>{secondData.text}</p> 
 
      <p>{secondData.category}</p> 
 
      <p>{secondData.organization}</p> 
 
      <button> UpButton </button> <br /> 
 
      <button> DownButton </button> 
 
      <button onClick = {() => this.changeIsReply(secondData.text)} > Reply </button> 
 
      {this.state.commentReplyIds.includes(secondData.text) ? <SetComment id={secondData.key} /> : null} 
 
     </div> 
 
    ) 
 
    )} 
 
    </ul> 
 
    </div> 
 
) 
 
}

、ユーザーが返信コメント]ボタンをクリックしたのさまざまなコメントで、複数のSetCommentのコンポーネントを持つことができます。

Answer 3

あなたは配列の配列とコメントのインデックスに基づいてクリック、更新のみ適切な値、私は2つのコンポーネントにこれを破壊することをお勧め

state= { 
    isReply: [[]] 
} 
changeIsReply(i, j) { 
    var isReply = [...this.state.isReply] 
    if(isReply[i] === undefined) { 
    isReply.push([true]) = 
    } else { 
    if(isReply[i][j] === undefined) { 
     isReply[i].push(true) 
    } else { 
     isReply[i][j] = !isReply[i][j] 
    } 
    } 
    this.setState(
    {isReply} 
); 
}  

    render() { 

    return (
    <div> 
    <ul className="list-group"> 
    {Object.values(this.props.commentInfo).map((data, i) => 
     data.map((secondData, j) => 
     <div className="commentHolder" key={j}> 
      <p>{secondData.text}</p> 
      <p>{secondData.category}</p> 
      <p>{secondData.organization}</p> 
      <button> UpButton </button> <br /> 
      <button> DownButton </button> 
      <button onClick = {() => this.changeIsReply(i, j)} > Reply </button> 
      {this.state.isReply[i][j] ? <SetComment id={secondData.key} /> : null} 
     </div> 
    ) 
    )} 
    </ul> 
    </div> 
) 
} 

Answer 4

のようなものであることをisReplyを維持する必要があります。 CommentListおよびCommentコンポーネント。

コメント-list.js

import Comment from './comment'; 

class CommentList extends Component{ 
    render(){ 
    return(
     <div> 
     <ul className="list-group"> 
       {Object.values(this.props.commentInfo).map((data) => 
       data.map((secondData, i) => 
        <Comment text={secondData.text} category={secondData.category} organization={secondData.organization} key={secondData.key} /> 
    ) 
     </ul> 
     </div> 
    ) 
    } 
} 

comment.js

class Comment extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     isReply: false 
    } 
    } 
    changeIsReply =() => { 
    this.setState(
     {isReply: !this.state.isReply,} 
    ); 
    } 
    render(){ 
    const {text, category, organization, key} = this.props; 
    return(
     <div className="commentHolder" key={i}> 
     <p>{text}</p> 
     <p>{category}</p> 
     <p>{organization}</p> 
     <button> UpButton </button> <br /> 
     <button> DownButton </button> 
     <button onClick = {this.changeIsReply} > Reply </button> 
     {this.state.isReply ? <SetComment id={key} /> : null} 
     </div> 
    ) 
    } 
} 

export default Comment; 

各コメントは、自身の状態を超えるとSetCommentコンポーネントを表示するかどうかを制御しているこの方法。

すべてのマークアップを単一のレンダリングメソッドに入れるのではなく、より多くのコンポーネントを作成しようとします。これはコードの編成にも役立ちますので、各値のセットをにマッピングします。というコンポーネントを使用すると、頭を包むのが少し楽になります。