React如何在PageHeader中展示活跃/封禁账号统计值

你计算出的活跃、封禁账号数是GetUserList方法内的局部变量，组件渲染阶段无法直接访问，把两个统计值存入组件state，渲染时直接从state取值即可，按以下步骤修改：

• 初始化组件state时，新增两个统计字段的默认值0，避免首次渲染时值为undefined报错
• 接口请求完成计算出统计值后，将两个值随列表数据一并写入setState
• 渲染PageHeader时，从state读取对应数值插入模板，同时修正原代码中PageHeader的JSX语法问题（原代码开标签后直接写入span节点不符合JSX语法，可根据所用组件库的API把统计内容放在对应位置）

第一步：修改接口请求逻辑，将统计值存入state #

GetUserList = async user_type => {
  this.setState({ loading: true });
  const res = await userMgmt.getUserList(user_type);
  console.log(res);

  const activeAccount = res.data.data.filter(({ banned }) => !banned).length;
  const bannedAccCount = res.data.data.filter(({ banned }) => banned).length;
  console.log("Active : ", activeAccount);
  console.log("Banned : ", bannedAccCount);

  if (res.status === 200) {
    if (this.mounted && res.data.status === "ok") {
      // 把统计值和列表数据一并存入state
      this.setState({ 
        loading: false, 
        user_list: res.data.data,
        activeAccount: activeAccount,
        bannedAccount: bannedAccCount
      });     
    }
  } else {  
    if (this.mounted) {
      this.setState({ loading: false });
    }
    ResponseError(res);
  }
};

记得在state初始化位置新增两个字段的默认值，示例：

this.state = {
  // 原有其他字段，比如loading、user_list等
  activeAccount: 0,
  bannedAccount: 0
}

第二步：修改PageHeader渲染逻辑 #

如果你用的是Ant Design类的组件库，统计信息可以放在extra属性位：

const pageHeader = (
  <PageHeader
    style={{ backgroundColor: "#fff", marginTop: 4 }}
    title="User Management - Admin"
    extra={[
      <span key="banned">{`Banned User : ${this.state.bannedAccount}`}</span>,
      <span key="active" style={{marginLeft: 16}}>{`Active User : ${this.state.activeAccount}`}</span>
    ]}
  />
);

如果你的PageHeader组件支持直接传入子元素作为自定义内容，也可以直接把span写在标签对内部：

const pageHeader = (
  <PageHeader
    style={{ backgroundColor: "#fff", marginTop: 4 }}
    title="User Management - Admin"
  >
    <span>{`Banned User : ${this.state.bannedAccount}`}</span>
    <span style={{marginLeft: 16}}>{`Active User : ${this.state.activeAccount}`}</span>
  </PageHeader>
);

注意：同级渲染多个JSX元素时需要加唯一key属性，两个统计项之间的间距可以根据UI需求自行调整样式。

内容的提问来源于stack exchange，提问作者deluez01