Javascript 通过路由将道具传递到页面的问题

我是ReactJs的新手。我已经创建了一个小应用程序，在网格中填充用户，点击与用户相关的按钮后，该应用程序将重定向到包含用户信息的页面（作为道具传递）。我已使用路由器处理此页面请求：

<Router>
<Route path="/" header="Main Page" component={() => (<MainPage content={users}/>)}>
</Route>
<Route path="/UserName" header="User Page" component={UserPage}/>
</Router>

用户页面非常基本，如下所示：

var React = require('react');
var ReactRouter = require('react-router');
var Link = ReactRouter.Link;
var Prompt = require('../components/Prompt');

var UsersList = React.createClass({
  accessUserInfo: function (user) {
    this.context.router.push('/UserName', query={user});
  },
  render: function(){
    return(
      <form>
       <table>
        <tbody>
        <tr>
          <th>Name</th>
          <th>Surname</th>
          <th>Day of Birth</th>
          <th>Username</th>
          <th>Role</th>
          <th></th>
        </tr>
        {this.props.content.map(function(user, i) {
          return (
            <tr key={i}>
              <td>{user.name}</td>
              <td>{user.surname}</td>
              <td>{user.birthday}</td>
              <td>{user.userName}</td>
              <td>{user.userRole}</td>
              <td>
                <Link>
                  <button type="submit" onSubmit={this.accessUserInfo(user)}>Open</button>
                </Link>
              </td>
            </tr>
          );
        }.bind(this))}
        </tbody>
      </table>
    </form>
   )
 }

var React = require('react');

var UserPage = React.createClass({
  render: function () {
   return(
  <table>
    <tbody>
    <h1>
    Information for User {this.props.user.userName}
    </h1>
    <tr>
      <td>Name: </td>
      <td>{this.props.user.name}</td>
      </tr>
    <tr>
      <td>Surname: </td>
      <td>{this.props.user.surname}</td>
    </tr>
    <tr>
      <td>Role: </td>
      <td>{this.props.user.userRole}</td>
    </tr>
    </tbody>
  </table>
)

我有两个问题：

• 无论单击哪个按钮，都会为数组中的每个项调用accessUserInfo（）方法
• 用户页面会加载，但用户道具不会传递给组件，正如我所看到的

无法读取未定义的属性“userName”

---

任何帮助都将不胜感激，请提前感谢

为避免对每个项目调用

accessUserInfo（）

，请使用箭头函数sintax:

onSubmit={（）=>this.accessUserInfo（user）}

但我认为您不需要这种方法，您需要稍微更改一下设计，因为您不能将对象作为属性发送。例如，如果要发送用户ID（以便从存储或API获取UserPage组件中的用户），可以直接使用链接设置属性。已经解释过了。举个例子，就用它吧

在将路线更改为类似

---

要避免为每个项目调用

accessUserInfo（）

，请使用箭头函数sintax:

onSubmit={（）=>this.accessUserInfo（user）}

但我认为您不需要这种方法，您需要稍微更改一下设计，因为您不能将对象作为属性发送。例如，如果要发送用户ID（以便从存储或API获取UserPage组件中的用户），可以直接使用链接设置属性。已经解释过了。举个例子，就用它吧

在将路线更改为类似

---

像这样尝试

onSubmit={（）=>this.accessUserInfo（user）}

像这样尝试

onSubmit={（）=>this.accessUserInfo（user）}

var React = require('react');

var UserPage = React.createClass({
  render: function () {
   return(
  <table>
    <tbody>
    <h1>
    Information for User {this.props.user.userName}
    </h1>
    <tr>
      <td>Name: </td>
      <td>{this.props.user.name}</td>
      </tr>
    <tr>
      <td>Surname: </td>
      <td>{this.props.user.surname}</td>
    </tr>
    <tr>
      <td>Role: </td>
      <td>{this.props.user.userRole}</td>
    </tr>
    </tbody>
  </table>
)

module.exports = UserPage;