我使用客户端路由(HashRouter、Link)。在 App 组件中,我有 3 个组件 - Home、Page1、Page2。我想从服务器获取数据并在 Page1 上动态显示此数据。但是当我转到此页面时出现错误:
当我没有将 Page1 配置为类并将其配置为 const(就像在 app.jsx Home 组件中一样)时,一切正常,但是当我尝试将其配置为类时,出现了我描述的错误下面。
这是我的代码:
应用程序.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
索引.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'))
最佳答案
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>)
}
关于javascript - react 不渲染类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51304984/