React 列表页实现

一、介绍

? ? ? ? 列表页是常用的功能，从后端获取列表数据，刷新到页面上。开发列表页需要考虑以下技术要点:1.如何翻页；2.如何进行内容搜索；3.何时进行页面刷新。

二、使用教程

1.user-service

根据用户id获取用户列表，返回的state包括列表响应，加载状态，请求错误等信息。

const useFetchUserList = () => {
    // useRequest Hook
    const [state, doRequest] = useRequest();
    // useAuth hook
    const [user] = useAuth(); 
    // 发起请求
    const fetch = (userId, page, pageSize) => doRequest('http://vicyor.com/user/'+userId, {page:page,pageSize:pageSize},
                    {authorization:user.token}, 'POST' );
    // 返回结果
    return {state, fetch}
}

demo

export const ListPage = () =>{
    
    const [search, setSearch] = useState('');

    const [page, setPage] = useState(1); 
    
    const [pageSize, setPageSize] = useState(10);
    
    const [state, fetch] = useFetchUserList();
    
    const handleSearch = keyword => fetch(keyword, page, pageSize);
    
    useEffect( () => {
        fetch('', 1, pageSize);
    },[])    

    return (<>
               <div>
                    <h2>User List</h2>
                    <Input.Search
                      value={search}
                      onChange={e => setSearch( e.target.value )}
                      onSearch={handleSearch}
                    />
                <Table
                  dataSource={state.data}
                  columns={getColumns()}
                  rowKey="id"
                  loading={state.isLoading}
                  error = {state.error}
                  pagination={true}
                />
                <Pagination
                  current={page}
                  total={state.total}
                  update = {setPage, setPageSize}
                />
              </div>
        </>);
    
}

2. province-city-service

省份和城市服务，选择省份后选择对应的城市

const useProvinceAndCity = () => {
    
    const [fetchProvince, provincesState] =  useRequest('http://vicyor.com/province/list',{},{},'GET');
    const [fetchCitys, citysState] = useRequest('http://vicyor.com/' + province + '/cityes', {}, {}, 'POST');

    return {fetchProvince, fetchCitys, provincesState, citysState};
    
}

demo

const CitySelector = () => {
  const [selectedProvince, setSelectedProvince] = useState('');
  const [selectedCity, setSelectedCity] = useState('');
  
  const [fetchProvince, fetchCitys, provincesState, citysState] = useProvinceAndCitys();
    
  // 初始加载所有省份
  useEffect(() => {
        fetchProvince();
  },[])

  const handleProvinceChange = (e) => {
    setSelectedProvince(e.target.value);
    // 加载所有城市
    fetchCitys(selectedProvince);
  };

  const handleCityChange = (e) => {
    setSelectedCity(e.target.value);
  };

  
  


  return (
    <div>
      <select value={selectedProvince} onChange={handleProvinceChange}>
         <option value ="">请选择省份<option>
          provincesState.res && provincesState.res.map(province => <option value= {province.name}>{province.name}</option>)
      </select>

      <select value={selectedCity} onChange={handleCityChange}>
        <option value="">请选择城市</option>
         citysState.res && citysState.res.map(city => <option value = {city.name}>{city.name}</city>
      </select>
    </div>
  );
};