Сопоставление данных API в компоненте реакции - как получить доступ к определенному свойству?

Question

Я хочу вернуть список, содержащий значение имени из следующего (усеченного) ответа API:

{
    "count": 82,
    "next": "http://swapi.dev/api/people/?page=2",
    "previous": null,
    "results": [
        {
            "name": "Luke Skywalker",
            "height": "172",
            "mass": "77",
            "hair_color": "blond",
            "skin_color": "fair",
            "eye_color": "blue",
            "birth_year": "19BBY",
            "gender": "male",
            "homeworld": "http://swapi.dev/api/planets/1/",
            "films": [

, и я хочу вернуть данные имени в следующем компоненте:

class App extends React.Component {
  constructor(){
    super()
    this.state = {
      characterName:''
    }
  }
  
  componentDidMount() {
  fetch('https://swapi.dev/api/people/')
  .then(res => res.json())
  .then(data => {
    this.setState({
      characterName: data
    })
  })
}
  

  
  render() {
    return(
      <div>
        <h1>heading</h1>
        <p>{this.state.characterName.results.map(person => {
            return ...person.name
          })
           }
        <p/>
      </div>
    
    )
  }
 
}

Я просто хочу отобразить список имен, как я могу изменить свою функцию карты для этого? Спасибо

Answer 1

Сначала вам нужно обновить начальное значение ключа characterName в вашем состоянии до массива

this.state = {
    characters: []
}

Затем установите значение characters на data.results

this.setState({
    characters: data.results
})

Затем сопоставьте массив символов следующим образом

<h1>heading</h1>
{this.state.characters.map((char) => <p>{char.name}</p>)}