单击单个行后，我有一个10行的数组，我需要转到新的路由，在该路由中需要填充选定的行详细信息。到目前为止，我正在获取完整的行数据，但如何引用以获得新页面中的行数据。
如何在新页面中获取data.title和data.score。
我是新来的反应者，任何指导都将有所帮助。
我已经检查了这篇文章，但我需要更多。 React - Triggering click event on table row
import React, { Component } from 'react';
import {connect} from 'react-redux';
import {loadUserInfo} from '../../actions/news.js';
import './Main.css';
class Main extends Component {
constructor(props){
super(props);
}
state= {
}
detailsView = (event) => {
const row = event.currentTarget;
console.log(row);
console.log(event);
}
render() {
let moviestorender = '';
if(this.props.news.newsArray && this.props.news.newsArray.length ==10 && this.props.news.userProfile && this.props.news.userProfile.length ==10){
moviestorender = this.props.news.newsArray.map((data, i) => {
if (i < 9)
{
return (
<tr key={data.id} onClick={this.detailsView}>
<td className="title">{data.title}</td>
<td className="row">{data.score}</td>
<td className="row">{data.by}</td>
<td className="row">{data.karma}</td>
<td className="row">{data.created}</td>
</tr>
)
}
})
}
return(
<div className="mainStart">
<table><tbody><tr>
<th className="title">Title</th>
<th className="row">Score</th>
<th className="row">Author</th>
<th className="row">Author's Karma</th>
<th className="row">Date Created</th>
</tr>{moviestorender}</tbody></table>
</div>
)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Main);
编辑2： 点击行的第一个组件
import React, { Component } from 'react';
import {withRouter} from 'react-router-dom';
import {connect} from 'react-redux';
import {loadUserInfo} from '../../actions/news.js';
import './Main.css';
class Main extends Component {
constructor(props) {
super(props);
this.onLogout = this.onLogout.bind(this);
}
onLogout(props) {
this.props.history.push({
pathname: '/details',
/* state: {
key: this.state
} */
});
}
state= {
}
render() {
let moviestorender = '';
if(this.props.news.newsArray && this.props.news.newsArray.length === 10 && this.props.news.userProfile && this.props.news.userProfile.length === 10){
moviestorender = this.props.news.newsArray.map((data, i) => {
if (i < 9)
{
return (<tr key={data.id} onClick={this.onLogout}>
<td className="title">{data.title}</td>
<td className="row">{data.score}</td>
<td className="row">{data.by}</td>
<td className="row">{data.karma}</td>
<td className="row">{data.created}</td>
</tr>)
}
})
}
return(
<div className="mainStart">
<table>
<tbody>
<tr>
<th className="title">Title</th>
<th className="row">Score</th>
<th className="row">Author</th>
<th className="row">Author's Karma</th>
<th className="row">Date Created</th>
</tr>{moviestorender}
</tbody>
</table>
</div>
)
}
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Main)); // this is used to get the history object from with router and to connect to store
第二个组件，在单击该行时将在其中导航。现在密钥是一个字符串
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Details extends Component {
render() {
let news = '';
if(this.props.location.key){
return (
<div>
<div className="title">{this.props.location.key.title}</div>
<div className="row">{this.props.location.key.score}</div>
<div className="row">{this.props.location.key.by}</div>
<div className="row">{this.props.location.key.karma}</div>
<div className="row">{this.props.location.key.created}</div>
</div>
)
}
return(
<div className="mainStart">
<h1> This is a details page </h1>
{news}
<Link to='/'>Home</Link>
</div>
)
}
}
export default Details;
当您尝试设置状态时遇到以下错误 DataCloneError：无法在“历史记录”上执行“ pushState”：函数createHref（location）{
答案 0 :(得分：3)
如果您使用react-router，则可以将数据发送到下一条路由
import { withRouter } from 'react-router-dom'
nextRoute = () => {
this.props.history.push({
pathname: "pathnamehere",
state: {
key: this.state
}
});
};
您还可以在下一条路线中获取数据
props.location.state.key.[propertyName]
答案 1 :(得分：0)
How to access custom attributes from event object in React?
上述帖子中Jared Forsyth的最新答案帮助我解决了这个问题。
第一个组件
import React, { Component } from 'react';
import {withRouter} from 'react-router-dom';
import {connect} from 'react-redux';
import {loadUserInfo} from '../../actions/news.js';
import './Main.css';
class Main extends Component {
constructor(props) {
super(props);
}
onLogout=function (data) {
this.props.history.push({
pathname: '/details',
state: {
key: data
}
});
}
render() {
let moviestorender = '';
if(this.props.news.newsArray && this.props.news.newsArray.length === 10 && this.props.news.userProfile && this.props.news.userProfile.length === 10){
moviestorender = this.props.news.newsArray.map((data, i) => {
if (i < 9)
{
return (<tr key={data.id} data-item={data} onClick={()=>this.onLogout(data)}>
<td className="title">{data.title}</td>
<td className="row">{data.score}</td>
<td className="row">{data.by}</td>
<td className="row">{data.karma}</td>
<td className="row">{data.created}</td>
</tr>)
}
})
}
return(
<div className="mainStart">
<table>
<tbody>
<tr>
<th className="title">Title</th>
<th className="row">Score</th>
<th className="row">Author</th>
<th className="row">Author's Karma</th>
<th className="row">Date Created</th>
</tr>{moviestorender}
</tbody>
</table>
</div>
)
}
}
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Main)); // this is used to get the history object from with router and to connect to store
第二部分
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Details extends Component {
render() {
let news = '';
if(this.props.location.state.key){
return (
<div>
<div className="title">{this.props.location.state.key.title}</div>
{/* <div className="row">this.props.location.key.[score]</div>
<div className="row">this.props.location.key.[by]</div>
<div className="row">this.props.location.key.[karma]</div>
<div className="row">this.props.location.key.[created]</div> */}
</div>
)
}
return(
<div className="mainStart">
<h1> This is a details page </h1>
{news}
<Link to='/'>Home</Link>
</div>
)
}
}
export default Details;