Question

我想让我的导航栏显示我从API获取的用户名。我可以在我的控制台中看到我使用密钥user object获取name。

所以我想知道访问数据的最佳做法是什么？顺便提一下，我的导航栏中有一些片段！

class MainNavbar extends Component {
  logout(e) {
    e.preventDefault()
    this.props.logout()
  }
  render() {
    return (
      <Navbar inverse collapseOnSelect>
        <Navbar.Header>
          <Navbar.Brand>
            <div>
              <img id="logo" />
            </div>
          </Navbar.Brand>
          <Navbar.Toggle />

在底部：

MainNavbar.propTypes = {
  logout: React.PropTypes.func.isRequired
  // I guess I need to do something here
}

function mapStateToProps(state) {
  return {
    auth: state.auth
    // And here as well, but what? :O
  }
}

export default connect(mapStateToProps, { logout })(MainNavbar)

非常感谢您阅读这个糟糕且不引人注目的问题。我感谢所有帮助！

谢谢！

Answer 1

要将用户名从redux状态映射到组件的道具，您需要：

将其添加到propTypes。

MainNavbar.propTypes = {
    logout: React.PropTypes.func.isRequired,
    name: React.PropTypes.string
}

从redux状态映射新prop。您需要检查这是否正确映射了您的州

function mapStateToProps(state) {
  return {
    auth: state.auth
    name: state.user.name
  }
}

有条件地在组件中显示名称。

<Navbar.Header>
  <Navbar.Brand>
    <div>
      <img id="logo" alt="Qlocx Logo" src={qlocx} />
    </div>
  </Navbar.Brand>
  {this.props.name ? this.props.name : null}
  <Navbar.Toggle />

Answer 2

您可能需要<Provider store>，然后您可以在组件中使用Redux存储。

https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store

从组件内部的操作访问数据|终极版

2 个答案: