Javascript 反应不呈现类

我使用客户端路由（HashRouter、Link）。应用程序内组件我有3个组件-主页、第1页、第2页。我想从服务器获取数据，并在第1页动态显示这些数据。但当我转到此页面时，我有一个错误：

当我不将Page1配置为类并将其配置为const（就像在app.jsx Home组件中一样）都可以正常工作，但是当我尝试像类一样配置它时，我会得到下面描述的错误

这是我的代码：

app.jsx

import React from 'react'
import {
  HashRouter as Router,
  Route,
  Link
} from 'react-router-dom'
import { 
  Container, 
  Row, 
  Col 
} from 'react-grid-system';
import Page1 from "./page1.jsx";

const Home = () => (
  <div class="container-fixed">
    <div class="row">
      <div class="col-l-4">
        <h2 class="underline">Home</h2>
      </div>
    </div>
  </div>
)

const Subpage = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)

const Page2 = ({ match }) => (
  <div class="container-fixed">
    <div class="row">
      <div class="col-l-4">
        <h2 class="underline">Subpages</h2>
        <ul class="content-list">
          <li class="content-list-item">
            <Link to={`${match.url}/subpage1`}>
              subpage1
            </Link>
          </li>
          <li class="content-list-item">
            <Link to={`${match.url}/subpage2`}>
            subpage2
            </Link>
          </li>
          <li class="content-list-item">
            <Link to={`${match.url}/subpage3`}>
            subpage3
            </Link>
          </li>
        </ul>

        <Route path={`${match.path}/:topicId`} component={Subpage}/>
        <Route exact path={match.path} render={() => (
          <h3>Please select a subpage.</h3>
        )}/>
      </div>
    </div>
  </div>
)

const App = () => (
      <Router>
        <Container>
          <Row>
            <Col md={2}>
              <h2 class="underline">Menu</h2>
              <ul class="content-list">
                <li class="content-list-item">
                  <Link to="/">Home</Link>
                </li>
                <li class="content-list-item">
                  <Link to="/page1">Page1</Link>
                </li>
                <li class="content-list-item">
                  <Link to="/page2">Page2</Link>
                </li>
              </ul>
            </Col>
            <Col>
              <Route exact path="/" component={Home}/>
              <Route path="/page1" component={Page1}/>
              <Route path="/page2" component={Page2}/>
            </Col>
          </Row>
        </Container>
      </Router>  
)

export default App

从“React”导入React
进口{
HashRouter作为路由器，
路线,，
链接
}从“反应路由器dom”
导入{
集装箱，
一行
上校
}来自“反应网格系统”；
从“/Page1.jsx”导入Page1；
常量Home=（）=>(
家
)
常量子页面=（{match}）=>(
{match.params.topicId}
)
常量Page2=（{match}）=>(
子页面


第1小段


第2子节


第3分页


(
请选择一个子页面。
)}/>
)
常量应用=（）=>(
菜单


家


第1页


第2页


)
导出默认应用程序

第1.jsx页

import React, {Component} from 'react';
const Row_ = function(props){
    const {id, content} = props;
    return (
      <div>
        id: {id}
        content: {content}
      </div>
    );
  }

  class Page1 extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        datas: [
          {id: 14, content: "test"},
          {id: 25, content: "test2"},
          {id: 75, content: "test3"},
        ]
      };
    }

    handleClick() {
      let fetchedData = gerData();
      this.addDataToHTML(fetchedData.id, fetchedData.content);
    }

    getData() {
      fetch('/testdata', {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        }
      })
      .then(results => {
        return results.json();
      })
    }

    addDataToHTML(id, content){    
      const datas = [...this.state.datas, 
                    {value: id, checked: content}
                   ];
      this.setState({
          datas,
      });
    }

    render(){
      <div class="container-fixed">
        <div class="row">
          <div class="col-l-4">
            <h2 class="underline">Page11</h2>
            {this.state.datas.map((row, idx) => {
            return(
                <Row_ 
                    id={row.id}
                    content={row.content}
                    /> 
                )
            })
            }
            <button onClick={this.handleClick}>
            Get data
            </button>
          </div>
        </div>
      </div>
    }
  }

  export default Page1

import React，{Component}来自'React'；
常量行=函数（道具）{
const{id，content}=props；
返回(
id:{id}
内容：{content}
);
}
类Page1扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[
{id:14，内容：“test”}，
{id:25，内容：“test2”}，
{id:75，内容：“test3”}，
]
};
}
handleClick（）{
设fetchedData=gerData（）；
this.addDataToHTML（fetchedData.id，fetchedData.content）；
}
getData（）{
获取（“/testdata”{
方法：“GET”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
}
})
。然后（结果=>{
返回results.json（）；
})
}
addDataToHTML（id，内容）{
const data=[…this.state.datas，
{value:id，checked:content}
];
这是我的国家({
数据，
});
}
render（）{
第11页
{this.state.datas.map（（行，idx）=>{
返回(
)
})
}
获取数据
}
}
导出默认页面1

index.jsx

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

import App from "./app.jsx";
import "../t_styles/css/components.min.css";
import "../t_styles/js/components.min.js";
import $ from "jquery";

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

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“/App.jsx”导入应用程序；
导入“./t_样式/css/components.min.css”；
导入“./t_styles/js/components.min.js”；
从“jquery”导入$；
ReactDOM.render((
)，document.getElementById（'index'））

虽然我看不到实际的错误，但我猜您的处理程序没有绑定到

类

实例，因此您无法通过

此

访问它

因此，要么将它们绑定到

类

（这通常在

构造函数

中完成）：

或者使用箭头函数语法，在词汇上下文中使用

this

：

handleClick = () => {
  let fetchedData = gerData();
  this.addDataToHTML(fetchedData.id, fetchedData.content);
}

1。使用className而不是class。
2.在Page1组件的呈现方法中添加return语句
render（）{
返回(
第11页
{this.state.datas.map（（行，idx）=>{
返回(
)
})
}
获取数据
)
}

遗憾的是，缩小的React错误说明不了什么。你能不能在不缩小代码的情况下再试一次，然后在问题中发布错误？什么时候会出现这个错误？@Tholle我怎样才能关闭最小化JS代码？@SeBr使用className而不是class@javed thnx，我修复了它，但是另一个错误：@SeBr add return语句在组件返回方法中。检查我给出的帖子。我试着这样做，但第一种方法不能解决问题，第二种方法有错误-语法在

handleClick=（）=>{

first

=

是意外的，第二种方法需要一个babel插件，但是如果第一种方法不能解决问题，那么它就不是问题。尽管我没有看到一种方法可以让你的代码在没有我发布的修复的情况下正常工作。我删除了所有方法（handleClick、getData、addDataToHTML）到目前为止，错误仍然挂起。可能是路由或类的构造函数中存在问题？因为如果我将Page1配置为const，则一切正常

handleClick = () => {
  let fetchedData = gerData();
  this.addDataToHTML(fetchedData.id, fetchedData.content);
}

1. use className instead of class.
2. add return statement in your render method of Page1 component

    render(){
      return (<div className="container-fixed">
        <div className="row">
          <div className="col-l-4">
            <h2 className="underline">Page11</h2>
            {this.state.datas.map((row, idx) => {
            return(
                <Row_ 
                    id={row.id}
                    content={row.content}
                    /> 
                )
            })
            }
            <button onClick={this.handleClick}>
            Get data
            </button>
          </div>
        </div>
      </div>)
    }