Question

我正在尝试从Chrome的topSites api渲染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`移至render方法中的页面。

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>

 )
}

JavaScript .map无法在React中呈现chrome.topSites

2 个答案: