Question

我有一个props对象，里面有一个用户注释数组和一个userId数组。最初，我只有用户注释数组，因此我使用map函数分别设置每个注释的样式。现在，我的props对象中有两个数组，有没有办法使用map函数同时设置用户评论和他的id的样式？这是我的尝试，但是没有用：

import React from 'react'
import faker from 'faker'

const UserComment = (props)=> {
    var commentData = props.map(props=> {
        return(<StyleComment comment = {props.comment} key = {props.comment} author = {props.userIds} />)})

    return(null)//commentData)
}


const StyleComment = (props) => {
    // get time of comment

    return(
        <div className = 'comment'> 

                        <a href="/" className= "avatar"> 
                            <img alt ="avatar" src= {faker.image.avatar()}/>
                        </a>

                    <div className = 'name'>
                        <a href ="/" className = "author">
                            {props.author}
                        </a> 
                        <span className="metadata"> Today at 1.00pm </span>
                        <div className= 'content'>
                            <div className = 'text'>{props.comment}</div>
                        </div>
                    </div>
                </div>
    )
}

此处是定义道具的父母：

<UserComment comment = {this.state.usersComment} userIds = {this.props.userIds}/>

，这是props对象的示例输出的console.log：

Answer 1

您需要将完整的对象传递给UserComment组件，

<UserComment comment={this.state.usersComment} />

然后您可以像这样迭代

const UserComment = (props)=> {
  console.log(props.comment);
    return props.comment.comment.map((comment,index) => {
            return <StyleComment key={comment} comment={comment} author={props.comment.userIds[index]}/>
    });
}

Demo

注意：当前的数组迭代和映射基于index，但是您必须在comment和userIds数组之间建立某种关系才能正确地映射数据

包含多个数组的对象上的映射函数

1 个答案: