Question

我想知道在初始渲染组件期间如何在Redux存储中使用数据。我正在尝试使用存储在Redux中的auth对象中的MongoDB数据来设置组件的名称属性。

<FontAwesome className="share-icon" name={this.props.auth.primaryAccount} />;

auth.primaryAccount 键将包含一个字符串（“google”，“facebook”，“github”或“twitter”，当此字符串作为组件中的name属性填充时，它将呈现正确的品牌标志。

如果我有一个父容器，它通过react-redux Connect（）帮助器同步到Redux商店，其中auth对象可用于道具mapStateToProps，如果组件直接放在父组件的render（）语句中， this.props.auth.primaryAccount 的空值为组件最初呈现。将 console.log（this.props.auth）放入组件的 componentDidMount 方法会产生 null 值，同时放置控制台。 log（this.props.auth）进入 componentDidUpdate 方法会导致Redux中出现预期的 auth对象。

  render() {
      return (
       <div className="dashboardContainer">
        <h1>Dashboard</h1>
        <PanelContainer bordered={false} defaultActiveKey={["1"]}>
          <Panel header="PRIMARY ACCOUNT INFORMATION" key="1" showArrow={false}>
            <FontAwesome className="share-icon" name={this.props.auth.primaryAccount} />
          </Panel>
        </PanelContainer>
       </div>
      );
    }

this.props.auth.primaryAccount 的正确值不能从Redux提供，直到初始组件装载/渲染之后。我假设这是由于auth动作创建者对MongoDB的查询的异步性质，以检索auth对象数据。

我已经能够通过在辅助函数中使用switch语句来解决这个问题，该函数阻止组件呈现，直到Redux数据在 this.props中可用（下面）但是我不得不为每一行引用Redux中存储的数据的JSX编写辅助函数。使用Redux数据进行组件渲染的最佳方法是什么？

  renderIcon() {
    switch (this.props.auth) {
      case null:
        return; 
      default:
        return <FontAwesome className="share-icon" name={this.props.auth.primaryAccount} />;
    }
  }

  render() {
    return (
      <div className="dashboardContainer">
        <h1>Dashboard</h1>
        <PanelContainer bordered={false} defaultActiveKey={["1"]}>
          <Panel header="PRIMARY ACCOUNT INFORMATION" key="1" showArrow={false}>
            {this.renderIcon()}
          </Panel>
        </PanelContainer>
      </div>
    );
  }
}

Answer 1

查看反应项目中的数据是一种非常常见的模式。人们经常使用与switch语句不同的语法。他们经常使用这样的条件快捷方式：

renderIcon() {
    var auth = this.props.auth
    return auth && <FontAwesome className="share-icon" name={auth.primaryAccount} />;
}

另一个版本是三元运算符：

renderIcon() {
    var auth = this.props.auth
    return auth ? <FontAwesome className="share-icon" name={auth.primaryAccount} /> : null;
}

React / Redux：在组件的初始render（）调用期间使用Redux存储中的数据

1 个答案: