Question

我创建了一个用户作品集react应用。此应用程序具有身份验证，因此只有登录的用户才能看到：注册用户及其投资组合。在我的App.js组件中，我存储了用户的道具。在我的投资组合组件中，名为“ Folio”。我可以使用以下变量this.props.match.params.id访问登录的用户ID，它显示登录的用户ID。我想知道如何以这种方式访问用户名或电子邮件。经过多次尝试，我似乎只能访问用户ID

这是App.js中的代码

class App extends Component {
  constructor() {
    super();
    this.state = {loggedIn: false, user: {email: '', name:''}};
    this.logout = this.logout.bind(this);
    this.login = this.login.bind(this);
  }

  logout(props) {
    axios.get('api/logout')
      .then(res => {
        this.setState({loggedIn: false});
        props.history.push('/');
      })
      .catch( err => console.log(err));
    return null;
  }

  login(user) {

    this.setState({loggedIn: true, user: user});
  }

这里是Folio组件。请注意，我如何使用this.props.match.params.id访问用户ID，但无法访问名称或电子邮件。

export default class Folio extends Component {
  constructor(props) {
    super(props);
    this.state = {
      folio: []
    };
  }

  componentDidMount() {
    console.log('Howdy ' + `${this.props.match.params.id}`);
    console.log('Howdy ' + `${this.props.user.name}`);
    axios.get(`/api/users/${this.props.match.params.id}/folios`)
      .then(response => {
        this.setState({folio: response.data});
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }

我仅将:id添加到路线

  <Link to={`/folio/${this.props.id}`}>
        <button className="button is-link" type="button">
              View Portfolios
        </button>
      </Link>

  <Route path="/folio/:id" render={(props) => <Folio {...props} user={this.state.user}/>} />

但是我也在寻找名字。

Answer 1

您应该像使用id一样将它们向下传递到组件，并且应该以相同的方式访问它们，例如=> this.props.match.params.name。我猜您只是将id传递给组件。

如何访问不同组件中的用户详细信息

1 个答案: