forgeplus-react/src/forge/Team/TeamMember.jsx

import React ,{ useEffect , useState } from 'react';
import { Banner , WhiteBack } from '../Component/layout';
import Cards from '../Component/MemberCards';
import axios from 'axios';
import Nodata from '../Nodata';
import { Pagination , Spin } from 'antd';

const limit = 15;
function TeamMember({organizeDetail,current_user}){
  const [ page , setPage ] = useState(1);
  const [ total , setTotal ] = useState(0);
  const [ isSpin , setIsSpin ] = useState(true);
  const [ list , setList ] = useState(undefined);

  useEffect(()=>{
    if(organizeDetail){
      getData();
    }
  },[organizeDetail,page]);

  function getData(){
    setIsSpin(true);
    const url = `/organizations/${organizeDetail.id}/organization_users.json`;
    axios.get(url,{
      page,limit
    }).then(result=>{
      if(result && result.data){
        setList(result.data.organization_users);
        setTotal(result.data.total_count);
        setIsSpin(false);
      }
    })
  }

  return(
    <WhiteBack style={{marginBottom:"30px",border:'1px solid #eee'}}>
      <Banner>组织成员</Banner>
      <Spin spinning={isSpin}>
        <div style={{minHeight:"400px"}}>
          {
            list && list.length > 0 &&
            <div className="memberBox">
              {
                list.map((item,key)=>{
                  return(
                    item.user && <Cards
                      user={item.user} 
                      img={item.user.image_url}
                      name={item.user.name}
                      time={item.created_at}
                      focusStatus={item.user.watched}
                      is_current_user={current_user && current_user.login === item.user.login}
                      login={item.user && item.user.login}
                      successFunc={getData}
                    />
                  )
                })
              }
            </div>
          }
          { list && list.length === 0 && <Nodata _html="暂无数据"/> }
        </div>
      </Spin>
      {
        total >limit &&
        <div className="mt20 pb20 edu-txt-center">
          <Pagination simple current={page} pageSize={limit} total={total} onChange={(page)=>setPage(page)}/>
        </div>
      }
    </WhiteBack>
  )
}export default TeamMember;