反应不渲染类答案

【问题标题】：React not render class反应不渲染类
【发布时间】：2018-12-20 15:30:26
【问题描述】：

我使用客户端路由（HashRouter、Link）。在 App 组件中，我有 3 个组件 - Home、Page1、Page2。我想从服务器获取数据并在 Page1 上动态显示这些数据。但是当我转到此页面时，我有错误：

当我不将 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

page1.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

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'))

【问题讨论】：

一个缩小的 React 错误并没有说太多，遗憾的是。您可以在不缩小代码的情况下再试一次，而是在问题中发布该错误吗？你什么时候收到这个错误？
@Tholle 如何关闭最小化 JS 代码？
@SeBr 使用 className 而不是 class。
@javed thnx，我修复了它，但另一个错误：link
@SeBr 在组件返回方法中添加返回语句。检查我给的帖子。

标签： javascript reactjs routing components render

【解决方案1】：

虽然我看不到实际的错误，但我的猜测是您的处理程序未绑定到class 实例，因此您无法通过this 访问它。

所以要么将它们绑定到class（这通常在constructor 内完成）：

this.handleClick = this.handleClick.bind(this);
this.getData= this.getData.bind(this);
this.addDataToHTML= this.addDataToHTML.bind(this);

或者使用将在词法上下文中使用this 的箭头函数语法：

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

【讨论】：

我尝试这样做，但第一种方法不能解决问题，第二种方法有错误 - handleClick = () => { 的语法错误第一个 = 是意外令牌
第二种方法需要一个 babel 插件"plugin-transform-class-properties" 但如果第一种方法不能解决问题，那么无论如何它都不是问题。尽管没有我发布的修复程序，我看不到您的代码正常工作的方法。
我删除了所有方法（handleClick、getData、addDataToHTML），到目前为止错误挂起。也许是路线或类的构造函数的问题？因为如果我将 Page1 配置为 const 一切正常

【解决方案2】：

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>)
    }

【讨论】：