Question

我使用客户端路由（HashRouter，链接）。在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'))

Answer 1

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

Answer 2

尽管我看不到实际的错误，但我的猜测是您的处理程序未绑定到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);
}

反应不渲染类

2 个答案: