浏览器没有看到我的组件，也没有渲染它，本地主机没有更新

Question

我在“ scr”中创建了一个名为“ components”的文件夹，在那里我创建了counter.jsx。当我启动npm start时，页面没有更新，并且当我检查开发人员工具时，没有看到我的组件和jsx文件。我该怎么办？

import React, { Component } from 'react';

class Counter extends Component {
  state = {
    count: 0,
    imageUrl: 'https://picsum.photos/200'
  };

  render() {
    return (
      <div>
        <img src={ this.state.imageUrl } alt=""/>
        <span>{ this.formatCount() }</span>
        <button></button>
      </div>
    );
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }
}

export default Counter;

Answer 1

您正在使用this.imageUrl，这是您尚未初始化的类变量。初始化的是组件状态变量this.state.imageUrl。您的图片将永远不会以这种方式显示。

示例：

<img src={ this.imageUrl } alt=""/> // not this
<img src={ this.state.imageUrl } alt=""/> // use this