小编Joh*_*son的帖子

我是 React 的新手，正在尝试从 API 中获取一些信息，但是在使用 .map 函数将检索到的数据传递到数组中时不断收到此错误：

类型错误：items.map 不是函数。

我对 JavaScript 不太熟悉，所以我不完全理解这里发生了什么。我已经包含了我的代码：

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  constructor() {
    super();
    this.state = {
      items: [],
      isLoaded: true
    };
  }

  componentDidMount() {
    fetch("http://www.colr.org/json/colors/random/7")
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          items: json
        });
      });
  }

  render() {
    var { items, isLoaded } = this.state;
    var itemInfo = items.map(item => (
      <div key={item.colors.id}>Hex:{item.colors.hex}</div>
    ));

    if (!isLoaded) {
      return <div>{itemInfo}</div>;
    } else …

因此，我有一个DIV元素，当按下该元素时，我想在其他窗口中打开一个新选项卡。唯一的问题是，每当刷新页面或按下任何其他div元素时，该函数也会同时启动并在另一个窗口中打开页面。我将在下面包含我的代码，但是我不确定为什么会onClick={window.open("https://www.thechinesewriter.com")像我所说的那样出现这种情况，我只希望在按下div时打开一个新标签页，而不是在单击页面，甚至刷新页面本身。

import React from "react";
import "./Column1.css";

class Column1 extends React.Component {

    render() {
        return(
            <React.Fragment>
                 <div className="rectImage">
                     <img className="imagePost" src={this.props.image} />   
                 </div>
                 <div onClick={window.open("https://www.thechinesewriter.com")} className="downloadBut1">
                     <h2>
                         Source
                     </h2>
                 </div>
                 <div className="downloadBut2">
                     <h2>
                         Repository
                     </h2>
                 </div>
             </React.Fragment> 
         )
     }     
}

export default Column1;