Javascript 如何在react.map函数中只修改一个元素?
我是一个新的反应,有点不知所措在这里做什么。我正在从firebase加载数据,并使用.map函数呈现该对象的道具,以列出页面上的所有“注释”,效果很好。我还想调用一个组件,该组件允许用户回复单个注释(即地图中的一个特定元素),但正如代码所预期的,当单击reply按钮时,它会在地图的每个元素下显示被调用的组件,这是不可取的。在这种情况下,我是否可以为映射的一个元素调用组件Javascript 如何在react.map函数中只修改一个元素?,javascript,reactjs,ecmascript-6,Javascript,Reactjs,Ecmascript 6,我是一个新的反应,有点不知所措在这里做什么。我正在从firebase加载数据,并使用.map函数呈现该对象的道具,以列出页面上的所有“注释”,效果很好。我还想调用一个组件,该组件允许用户回复单个注释(即地图中的一个特定元素),但正如代码所预期的,当单击reply按钮时,它会在地图的每个元素下显示被调用的组件,这是不可取的。在这种情况下,我是否可以为映射的一个元素调用组件 changeIsReply() { this.setState( {isReply: !this.state.is
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>
)
}
changeIsReply(){
这是我的国家(
{isReply:!this.state.isReply,}
);
}
render(){
返回(
{Object.values(this.props.commentInfo).map((数据)=>
data.map((第二个数据,i)=>
{secondData.text}
{secondData.category}
{secondData.organization}
向上按钮
按钮
回复
{this.state.isReply?:null}
)
)}
)
}
您可以跟踪哪个注释应该使用SetComment组件
构造函数(道具){
超级(道具);
此.state={
//初始化CommentReplyId为空数组
CommentReplyId:[],
//…你所在州的其他地方
}
}
changeIsReply(commentId){
const newCommentReplyIds=[…this.state.commentReplyIds.commentId];
这是我的国家(
{commentReplyIds:newCommentReplyIds}
);
}
render(){
//在这里,我使用data.text作为每个注释的唯一id,您可以使用其他可序列化的值。
返回(
{Object.values(this.props.commentInfo).map((数据)=>
data.map((第二个数据,i)=>
{secondData.text}
{secondData.category}
{secondData.organization}
向上按钮
按钮
this.changeIsReply(secondData.text)}>Reply
{this.state.commentReplyIds.includes(secondData.text)?:null}
)
)}
)
}
这是因为您对所有注释使用的是单一状态
this.changeIsReply(secondData.key)}>Reply
{this.state.isReply&&this.state.clickedComment=={secondData.key}?:null}
并将您的ChangesReply()更改为:
看看这是否有效。不要忘了将新状态添加到构造函数中。您需要将
isReply
保留为数组数组,并根据单击的注释索引,仅更新适当的值,如
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>
)
}
状态={
isReply:[[]]
}
变更重复(i,j){
var isReply=[…this.state.isReply]
if(isReply[i]==未定义){
isReply.push([true])=
}否则{
if(isReply[i][j]==未定义){
isReply[i]。推送(true)
}否则{
isReply[i][j]=!isReply[i][j]
}
}
这是我的国家(
{isReply}
);
}
render(){
返回(
{Object.values(this.props.commentInfo).map((数据,i)=>
data.map((secondData,j)=>
{secondData.text}
{secondData.category}
{secondData.organization}
向上按钮
按钮
这个.changeIsReply(i,j)}>回复
{this.state.isReply[i][j]?:null}
)
)}
)
}
我建议将其分为两部分。CommentList
和Comment
组件
评论列表.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>
)
}
}
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;
从“/Comment”导入注释;
类CommentList扩展了组件{
render(){
返回(
{Object.values(this.props.commentInfo).map((数据)=>
data.map((第二个数据,i)=>
)
)
}
}
comment.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>
)
}
}
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;
类注释扩展组件{
建造师(道具){
超级(道具);
此.state={
伊斯雷普利:错
}
}
changeIsReply=()=>{
这是我的国家(
{isReply:!this.state.isReply,}
);
}
render(){
const{text,category,organization,key}=this.props;
返回(
{text}
{类别}
{组织}
向上按钮
按钮
回复
{this.state.isReply?:null}
)
}
}
导出默认注释;
这样,每个注释都可以控制自己的状态以及是否显示SetComment
组件。尝试制作更多的组件,而不是将所有标记放在一个呈现方法中。这也有助于组织代码,以便将每组值映射到一个组件,我认为这会使您更容易理解