Обновить значение состояния после другого API извлечения

Question

У меня есть буксир APi.

Первый вернул мне список людей, и у каждого человека есть хобби с числами.

0: hobby: (3) [28, 12, 16] id: 233 Name: John

Второй APIвернул мне массив со всеми хобби

 hobbies:[
0: {id: 28, name: "Football"}
1: {id: 12, name: "Reading"}
2: {id: 16, name: "Dancing"}
]

теперь я должен посмотреть, равны ли числа person.hobby идентификатору хобби, я должен обновить состояние с именем хобби.

И мне нужно что-то вроде этого:

0: hobby: (3) ["Football", "Reading", "Dancing"] id: 233 Name: John

У меня есть это состояние

this.state = { results: [], hobbies: [] };

и мой дисплей

{results
        .map(person => (
          <div key={movie.id} className="person -holder">
            <p>{person.name}</p>
            <p>{person.hobbies}</p>// but here it display the numbers
          </div>
        ))}

Как я могу отобразить Хобби из списка хобби?

Answer 1

У вас может быть вторая карта, чтобы позаботиться о хобби, а затем отфильтровать результаты.Конечно, есть и другие способы сделать это.

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      results: [
        {
          hobby: [28, 12, 16],
          id: 233,
          Name: 'John'
        },
        {
          hobby: [12, 28],
          id: 100,
          Name: 'Andy'
        }
      ],
      hobbies: [
        {id: 28, name: "Football"},
        {id: 12, name: "Reading"},
        {id: 16, name: "Dancing"}
      ]
    };    
  }

   render() {
    return ( 
        this.state.results.map(person =>
        (
          <div key={person.id}>
            <p>{person.Name}</p>
            <div>{person.hobby.map(hobby => (
            <div key={hobby}>
              {this.state.hobbies.filter(h => h.id === hobby)[0].name}
            </div>
            ))}
            </div>
          </div>
          )
        )
    );
  }
}

ReactDOM.render( <App /> ,
  document.getElementById('root')
);

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="root" />