分别反应 map 对象数组

Question

我在 React JS 中遇到了一个问题。 我想单独显示全名数据。

Object 阵列

0: {id: "1", wp_user_id: null, facebook_id: null, group_id: null, full_name: "furqan", …}
1: {id: "3", wp_user_id: null, facebook_id: null, group_id: null, full_name: "hassan",..}

我的代码：

   this.state = {
        cusomterdata:[],      
      }
    }

    render() {  
        return (
            <div>
                {this.state.cusomterdata.map(function(item, i){
              return ([
                        <p key={i}>{item.full_name}</p>,
                        <p key={i}>{item.id}</p>,
                    ]);
                })}
            <div>
        )
    }

当我在这里运行此代码结果时，它们都聚集在一起

 - furqan
 - 1
 - hassan
 - 3

我想这样做，但它不起作用。

     <p key={i}>{item.full_name[0]}</p>,   //just show first fullname

预计 Output

我应该怎么办？ 谁能帮我？

Answer 1

据我了解，您只想显示第一项的全名。

您可以执行以下操作：

render() {

    let FullName = null;
    if (this.state.cusomterdata) {
        FullName = (
            {
                this.state.cusomterdata.map((data, index) => {
                    return (
                        <p key={index}>{data.full_name}</p>
                    )
                })
            }
        )
    }

    return (
        <div>
            { FullName }
        </div>
    )
}