分别为对象的反应图数组

Question

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

对象数组

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){
[![enter image description here][1]][1]                    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

预期输出

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

Answer 1

map数组助手将遍历数组并逐个元素地进入数组。因此，如果您只想显示每个项目，则只需执行以下操作：

 return (
  <>
    <p> this.state.cusomterdata[0].full_name</p>
    <p>this.state.cusomterdata[0].id</p>
  </>
)

Answer 2

仅显示阵列中的第一个item，您可以这样做：

<p>
  {this.state.cusomterdata &&
    this.state.cusomterdata[0] &&
    this.state.cusomterdata[0].full_name}
</p>

或执行slice：

{
  this.state.cusomterdata &&
    this.state.cusomterdata
      .slice(0, 1)
      .map((item) => <p key={item.id}>{item.full_name}</p>)
}