JavaScript .map не отображает chrome.topSites в React

Question

Я пытаюсь отобразить список заголовков из API Chrome topSites для расширения Chrome.

Когда я захожу на консоль, я получаю следующее:

[
  {
    "title": "Chrome Web Store",
    "url": "https://chrome.google.com/webstore?hl=en"
  }
]

Однако следующее ничего не отображает на странице

render() {
  return (
    <ul>
      {
        chrome.topSites.get(data => {
          console.log(data);

          data.map(site => {
            return (
              <li key={site.title}>
                {site.title}
              </li>
            );
          });
        })
      }
    </ul>
  );
}

Ожидаемый результат:Тег p с названием сайта выводится на экран

Фактический вывод: на экране ничего не отображается

Answer 1

Это сработало для меня.Перемещение chrome.topSites.get into componendDidMount () and assigning it to state. Then mapping the this.state.sites` на страницу в методе рендеринга.

export default class TopSites extends Component {
  constructor(props) {
    super(props);

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

  componentDidMount() {
    chrome.topSites.get(data => {
      this.setState({
        sites: data
      });
    });
  }

  render() {
    const {sites} = this.state;

    return (
      <ul>
        {sites.map(site => {
          return (
            <li key={site.title}>
              {site.title}
            </li>
          );
        })}
      </ul>
    );
  }
}

Answer 2

state= {
  data: '',
 }

// declaring a async function 
getData = async () => {
        const result = await chrome.topSites.get(); // waiting for the result
 this.setState({ data: result});
 }

componentDidMount(){
  this.getData();
}


 render(){
 const list = this.state.data ? this.state.data.map((val) => <li key={val.title}> {val.title}
    </li> : null)
return(
     <ul>
     {list}
    </ul>

 )
}