将道具传递到React Router的链接组件

Question

我正在将位置道具传递给React Router的链接。 它成功使我离开，但是当我单击“后退”返回上一页时，出现错误：

TypeError无法读取属性“ statusUser”未定义

当我向后导航时，似乎道具弄乱了。

Sidebar.js

Class Sidebar extends Commponent{
render(){    
    return(
     <Link to={
                {
                  pathname: `/user`,
                  state:{
                    statusUser: 'abc',
                  }
                 }
               }><Button>User Menu</Button>
 }
          )
}

User.jsx

class user extends Component {
  render(){    
    return(
        <UserTable status={this.props.location.state.statusUser}/>
    )
  }
}

UserTable.jsx

 class UserTable extends Component{
         render(){    
            return(
                     <Link to={
                {
                  pathname: `/user/detail/${this.props.status}`,
                  state:{
                    statusUser: this.props.status,
                  }
                 }
               }><Button>Detail</Button>
            )
          }
    }

UserDetail.jsx

   class UserDetail extends Component{
             render(){    
                return(
                      <p>{this.props.location.state.statusUser}</p>
                         <Link to={
                    {
                      pathname: `/user`,
                     }
                   }><Button>Back</Button>
                )
              }
        }

我认为问题出在User.js中。 如何固定道具，例如使用setState或User.js文件中的东西？

只是为了能够读取props属性，并在读取后通过单击“后退”按钮返回到上一页。

对不起，我只是React的真正新手，所以我们将不胜感激。 谢谢。

Answer 1

我相信当您单击UserDetail.jsx的“后退”按钮时，您会收到该错误。 您没有将state对象传递给User.jsx 。

User.jsx组件尝试访问this.props.location.state.statusUser ，但是state不存在，因此它说无法读取undefined statusUser属性（ state为undefined ）。

这是您所缺少的，并修正了一些拼写错误：

// UserDetail.jsx
class UserDetail extends Component {
  render() {
    return (
      <div>
        <p>{this.props.location.state.statusUser}</p>
        <Link
          to={{
            pathname: `/user`
            // (You aren't passing `state`)
          }}
        >
          <Button>Back</Button>
        </Link>  // <-- You weren't closing Link
      </div>
    );
  }
}

// User.jsx
class User extends Component {  // <-- Capital 'U'
  render() {
    return (
      <UserTable
        status={this.props.location.state.statusUser}  // <-- You require `state`
      />
    );
  }
}

至于解决方法，最简单的方法是使用UserDetail.jsx “返回”按钮传递state对象。

您还可以在React中设置defaultProps 。 我不确定这是否适用于您，但可以让您提供备用信息：

编辑：包括defaultProps和propTypes的示例。

// User.jsx
class User extends Component {
  render() {
    return (
      <UserTable
        status={this.props.location.state.statusUser}
      />
    );
  }
}

// Maybe something you put in a different file
const defaultLocation = {
  state: {
    statusUser: '',  // <-- Your default statusUser
  },
};

User.defaultProps = {
  location: defaultLocation,
};

// import PropTypes from 'prop-types';
User.propTypes = {
  location: PropTypes.shape({
    state: PropTypes.shape({
      statusUser: PropTypes.string.isRequired,
    })
  })
};

我在上面的示例中添加了PropTypes 。 这是一种对组件中所需数据进行检查的方法。

通常，如果isRequired ，我们不会将props放入defaultProps ，因为它永远不会实现。 如果不确定要给statusUser提供的默认值，建议从propTypes使其成为必需propTypes ，然后在将来需要时可以进行重构。

---

您的其他代码示例中也存在一些错误。 我在下面格式化了它们，并修复了错误。 我会指出我在评论中修正的内容：

Sidebar.js

class Sidebar extends Component {  // <-- Lowercase 'c'; "Component"
  render() {
    return (
      <Link
        to={{
          pathname: `/user`,
          state: {
            statusUser: "abc"
          }
        }}
      >
        <Button>User Menu</Button>
      </Link>  // <-- You weren't closing Link
    );
  }
}

UserTable.jsx

class UserTable extends Component {
  render() {
    return (
      <Link
        to={{
          pathname: `/user/detail/${this.props.status}`,
          state: {
            statusUser: this.props.status
          }
        }}
      >
        <Button>Detail</Button>
      </Link>  // <-- You weren't closing Link
    );
  }
}