对于地址的封装

偶尔空闲没事，自己对于地址封装的一些想法， 对于n级地址的封装

import React, { useEffect, useState } from 'react';
import AddressSelect from "./index";
import { Input } from 'antd';

const AddressComponent: React.FC = () => {
  const [selectedAddress, setSelectedAddress] = useState<string[]>([
    '',
    '',
    '',
    '',
    '',
  ]);
  const [addressLists, setAddressLists] = useState<any[][]>([
    [],
    [],
    [],
    [],
    [],
  ]);
  const addressLevels = [0, 1, 2, 3, 4]; // 0: 省, 1: 市, 2: 区, 3: 镇, 4: 村
  const [addressNameValue, setAddressNameValue] = useState<string[]>([
    '',
    '',
    '',
    '',
    '',
  ]);

  const fetchAddress = (value: string, level: number) => {
    // Replace with your actual data fetching logic
    let address = [
      { code: '1', name: '省1' },
      { code: '2', name: '省2' },
      { code: '3', name: '省3' },
      { code: '4', name: '省4' },
    ];

    const newAddressLists = [...addressLists];
    newAddressLists[level] = address;

    setAddressLists(newAddressLists);
  };

  useEffect(() => {
    // Initial data fetching when the component mounts
    fetchAddress('0', 0);
  }, []);

  const handleAddressChange = (level: number, value: string) => {
    const newSelected = [...selectedAddress];
    newSelected[level] = value;

    addressNameValue[level] = addressLists[level].filter(
      (item: any) => item.code === value,
    )[0].name;
    setAddressNameValue([...addressNameValue]);
    setSelectedAddress(newSelected);

    if (level < addressLevels.length - 1) {
      fetchAddress(value, level + 1);
    }
  };

  return (
    <div>
      {/* Display the selected address as an Input */}
      <Input
        value={addressNameValue.join('')}
      />
      <div style={{ display: 'flex', width: '95%' }}>
        {/* Use AddressSelect component for each address level */}
        {addressLevels.map((level: number, index: number) => (
          <AddressSelect
            key={index}
            value={selectedAddress[level]}
            onChange={(value: any) => handleAddressChange(level, value)}
            options={addressLists[level]}
          />
        ))}
      </div>
    </div>
  );
};

export default AddressComponent;

对于地址组件的封装

// AddressSelect.tsx

import { Select } from 'antd';
import React, { useEffect, useState } from 'react';

const { Option } = Select;

interface AddressSelectProps {
  value: string;
  onChange: (value: string) => void;
  options: any[]; //地址列表
}

const AddressSelect: React.FC<AddressSelectProps> = ({
  value,
  onChange,
  options,
}) => {
  const [selectedValue, setSelectedValue] = useState<string | undefined>(value);

  useEffect(() => {
    setSelectedValue(value);
  }, [value]);

  const handleAddressChange = (newValue: string) => {
    setSelectedValue(newValue);
    onChange(newValue);
  };

  return (
    <Select
      allowClear
      value={selectedValue}
      style={{ width: '15%' }}
      onChange={handleAddressChange}
    >
      {options.map((item: any, index: number) => (
        <Option key={index} value={item.code}>
          {item.name}
        </Option>
      ))}
    </Select>
  );
};

export default AddressSelect;

若大家有不同的观点可以互相讨论，