react里做一个修改效果_如何只修改react .map函数中的一个元素？

I'm a little new to react and was a little lost with what to do here. I'm loading data from firebase and rendering the props of that object using a .map function to list all the 'comments' on a page, which works fine. I also want to call a component that would allow the user to reply an individual comment (i.e. one specific element in the map), but as expected by this code, when the reply button is clicked it displays the called component under every element of the map, which isn't desirable. Is there anyway I could call the component for just one element of the map in this case?

changeIsReply() {

this.setState(

{isReply: !this.state.isReply,}

);

}

render() {

return (

{Object.values(this.props.commentInfo).map((data) =>

data.map((secondData, i) =>

{secondData.text}

{secondData.category}

{secondData.organization}

UpButton

DownButton

Reply

{this.state.isReply ? : null}

)

)}

)

}

解决方案

That's because you are using a single state for all the comments.

this.changeIsReply(secondData.key)} > Reply

{this.state.isReply && this.state.clickedComment == {secondData.key} ? : null}

and change your changeIsReply() to:

changeIsReply(clickedId) {

this.setState(

{isReply: !this.state.isReply, clickedComment: clickedId}

);}

See if this works. Don't forget to add the new state to your constructor.