In iphone shows error maximum call stack exceeded error ,but working in android , window and mac

[shahidforsdlc]

// LocationSelector.js
import React, { useState, useEffect } from 'react';
import { Select, Form, Input } from 'antd';
import { State, City } from 'country-state-city';

const { Option } = Select;

const LocationSelector = ({ form }) => {
  const [states, setStates] = useState([]);
  const [cities, setCities] = useState([]);
  const [selectedState, setSelectedState] = useState(null);

  useEffect(() => {
    const statesData = State.getStatesOfCountry('US');
    setStates(statesData);
  }, []);

  const handleStateChange = (value) => {
    setSelectedState(value);
    const selectedStateObj = states.find(state => state.name === value);
    const citiesData = City.getCitiesOfState('US', selectedStateObj.isoCode);
    setCities(citiesData);
    form.setFieldsValue({ city: null }); // Reset city field
  };

  const validateZipCode = (rule, value) => {
    const zipCodeRegex = /^[0-9]{5}(?:-[0-9]{4})?$/;
    // const zipCodeRegex = /^\d{5}$/;
    if (value && !zipCodeRegex.test(value)) {
      return Promise.reject('Invalid ZIP code! Please enter a 5-digit or 9 digit ZIP code. Example 12345 or 12345-1234');
    }
    return Promise.resolve();
  };

  return (
    <>
     <Form.Item
        label="Country"
        name="country"
        initialValue="USA"
        rules={[{ required: true, message: 'Please select a country!' }]}
      >
        <Select
          placeholder="Select country"
          allowClear
          optionFilterProp="children"
          showSearch
          disabled
        >
          <Option value="USA">United States</Option>
        </Select>
      </Form.Item>
      <Form.Item
        name="state"
        label="State"
        rules={[{ required: true, message: 'Please select a state!' }]}
      >
        <Select
        allowClear
        optionFilterProp="children"
        showSearch
          placeholder="Select a state"
          onChange={handleStateChange}
        >
          {states.map((state) => (
            <Option key={state.name} value={state.name}>
              {state.name}
            </Option>
          ))}
        </Select>
      </Form.Item>

      <Form.Item
        name="city"
        label="City"
        rules={[{ required: true, message: 'Please select a city!' }]}
      >
        <Select
        allowClear
        optionFilterProp="children"
        showSearch
        placeholder="Select a city" disabled={!selectedState}>
          {cities.map((city) => (
            <Option key={city.name} value={city.name}>
              {city.name}
            </Option>
          ))}
        </Select>
      </Form.Item>

      <Form.Item
        name="zipCode"
        label="ZIP Code"
        rules={[
          { required: true, message: 'Please enter a ZIP code!', validateTrigger: ['onSubmit'] },
          { validator: validateZipCode, validateTrigger: ['onSubmit'] },
        ]}
      >
        <Input placeholder="Enter ZIP code" />
      </Form.Item>
    </>
  );
};

export default LocationSelector;

[dosubot[bot]]

Hey @shahidforsdlc! 👋 I'm here to help you with any issues you're facing. I can assist with bug fixes, answer questions, and even guide you on becoming a contributor. Let's squash those bugs together!

The "maximum call stack exceeded" error on iPhone could be due to several reasons, including differences in how JavaScript is executed on iOS Safari compared to other platforms. Here are a few steps to help diagnose and potentially resolve the issue:

1. Check for Recursive Logic or Infinite Loops: Ensure there are no unintended infinite loops or recursive logic in your component. The useEffect hook and handleStateChange function look fine, but double-check for any indirect recursion.

2. Asynchronous Behavior: Verify if there is any asynchronous behavior or promise handling in the useEffect or handleStateChange functions that might be causing unexpected re-renders or state updates on iOS .

3. Performance and Memory Constraints: iOS devices might have different performance or memory constraints. Ensure that handling large datasets or complex state updates is optimized .

4. Debugging and Logging: Add additional logging to understand the state and props of the LocationSelector component at the time of the error. This can help pinpoint where the issue is occurring .

5. Check Dependencies: Ensure there are no known issues or limitations with the country-state-city library or the antd library's Select component when used on iOS devices .

6. React and Ant Design Versions: Verify if there are any differences in the versions of React, Ant Design, or other dependencies between the environments where the error occurs and where it does not .

By following these steps, you should be able to narrow down the cause of the "maximum call stack exceeded" error on iPhone and find a suitable solution.

To continue talking to Dosu, mention @dosu.