javascript - 访问状态中的元素

Question

我正在尝试访问处于 React 状态的对象数组中的元素。该数组是 fetch 命令的结果。我知道我需要写一个“地图”，但地图会导致获取数组的整个元素。

这是我写的代码：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

// function App() {

// } instead we'll use class component




class App extends Component{

  constructor(){
    super();
    this.state = {
      guys:[]
    }
  
  };

  componentDidMount(){
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(response=>response.json())
    .then(user=>this.setState({guys:user}))
  }
  

  render(){
    //we'll add the return part from the stateless component
    return (
      
      <div className="App">
        {this.state.guys.map(guy=>(
          <h2 > {guy.email} </h2>
        ))}

      </div>
    );
  }
}

export default App;

上面代码的结果是：

[e-mail]
[e-mail]
[e-mail]
[e-mail]
[e-mail]
[e-mail]
[e-mail]
[e-mail]
[e-mail]
[e-mail]

但是，我只想访问一个元素，例如，理想的结果必须是[e-mail].

我试过<h1>this.state.guys[1].email</h1>了，但这种方法似乎无效，我知道我应该做其他事情。您对如何仅访问和操纵一个（或一些）状态有任何想法吗？

标签： javascriptarraysreactjscomponents