Javascript 反应-触发表行上的单击事件，并在另一页中显示所选行的详细信息

我有一个10行的数组，单击单个行时，我需要转到新路线，在其中我需要填充所选行的详细信息。到目前为止，我正在获取完整的行数据，但如何在新页面中引用以获取行数据

如何在新页面中获取data.title和data.score

我是新来的反应，任何指导都会有帮助

我已经检查了这篇文章，但我需要更多

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../../actions/news.js”导入{loadUserInfo}；
导入“/Main.css”；
类主扩展组件{
建造师（道具）{
超级（道具）；
}
状态={
}
detailsView=（事件）=>{
常量行=event.currentTarget；
控制台日志（行）；
console.log（事件）；
}
render（）{
让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（（数据，i）=>{
如果（i<9）
{
返回(
{data.title}
{data.score}
{data.by}
{data.karma}
{data.created}
)
}
})
}
返回(
标题
分数
作者
作者的业力
创建日期
{moviestorender}
)
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（主）；

编辑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}来自'React'；
从“react router dom”导入{withRouter}；
从'react redux'导入{connect}；
从“../../actions/news.js”导入{loadUserInfo}；
导入“/Main.css”；
类主扩展组件{
建造师（道具）{
超级（道具）；
this.onLogout=this.onLogout.bind（this）；
}
仅限（道具）{
这个。道具。历史。推({
路径名：'/details'，
/*声明：{
钥匙：这个州
} */
});
}
状态={
}
render（）{
让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（（数据，i）=>{
如果（i<9）
{
返回(
{data.title}
{data.score}
{data.by}
{data.karma}
{data.created}
)
}
})
}
返回(
标题
分数
作者
作者的业力
创建日期
{moviestorender}
)
}
}
使用路由器导出默认值（connect（mapStateToProps，mapDispatchToProps）（Main））；//这用于通过路由器从中获取历史对象，并连接到存储

单击行时导航的第二个组件。现在键是一个字符串

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;

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
类详细信息扩展组件{
render（）{
让新闻=''；
if（this.props.location.key）{
返回(
{this.props.location.key.title}
{this.props.location.key.score}
{this.props.location.key.by}
{this.props.location.key.karma}
{this.props.location.key.created}
)
}
返回(
这是一个详细信息页面
{新闻}
家
)
}
}
导出默认详细信息；

当您尝试设置您提到的状态时，出现以下错误

---

DataCloneError:未能在“历史记录”上执行“pushState”：函数createHref（位置）{

如果您正在使用react路由器，则可以将数据发送到下一个路由

 import { withRouter } from 'react-router-dom'

 nextRoute = () => {
 this.props.history.push({
  pathname: "pathnamehere",
  state: {
    key: this.state
   }
 });
};

你们也可以在下一条路线上得到数据

props.location.state.key.[propertyName]    

---

如果您使用的是react路由器，则可以将数据发送到下一个路由

 import { withRouter } from 'react-router-dom'

 nextRoute = () => {
 this.props.history.push({
  pathname: "pathnamehere",
  state: {
    key: this.state
   }
 });
};

你们也可以在下一条路线上得到数据

props.location.state.key.[propertyName]    

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;

import React，{Component}来自'React'；
从“react router dom”导入{withRouter}；
从'react redux'导入{connect}；
从“../../actions/news.js”导入{loadUserInfo}；
导入“/Main.css”；
类主扩展组件{
建造师（道具）{
超级（道具）；
}
onLogout=函数（数据）{
这个。道具。历史。推({
路径名：'/details'，
声明：{
关键词：数据
} 
});  
}
render（）{
让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（（数据，i）=>{
如果（i<9）
{
返回（this.onLogout（数据）}>
{data.title}
{data.score}
{data.by}
{data.karma}
{data.create