Question 295201 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – react about useEffect

I have a database

[
    {
        "ID": 3,
        "fourth_ip": "5",
        "location": "jp",
        "third_ip": "20"
    },
    {
        "ID": 4,
        "fourth_ip": "123",
        "location": "jp",
        "third_ip": "21"
    },
    {
        "ID": 5,
        "fourth_ip": "123",
        "location": "hk",
        "third_ip": "20"
    },
    {
        "ID": 6,
        "fourth_ip": "200",
        "location": "sg",
        "third_ip": "11"
    },
    {
        "ID": 7,
        "fourth_ip": "6",
        "location": "jp",
        "third_ip": "20"
    },
    {
        "ID": 8,
        "fourth_ip": "200",
        "location": "sg",
        "third_ip": "12"
    }
]

how can i create 3 select with location, third_ip and fourth_ip, they must be related to each other.
like if localtion is jp, third_ip select should be 20,21 and when selected 20 fourth_ip should be 5,6.
Another problem is when I open the page first time, it will be the correct. Location is jp, third_ip is 20 and fourth_ip is 5. But when I select location to hk, third_ip is 20 , but fourth_ip is null.

useEffect(() => {
        // setEdgeData(data)
        const edgeLocation:never[] = Array.from(new Set(data.map((item: { location: any; }) => item.location)));

        setEdgeLocation(edgeLocation);
        // setRegion(edgeLocation[0])
        if (!region) {
            setRegion(edgeLocation[0]);
        }
        console.log(region)


    }, [data]);

    useEffect(() => {
        setThirdIP("")
        const selectedThirdIP:never[] = Array.from(new Set(
            data
                .filter((item: { location: string; }) => item.location === region)
                .map((item: { third_ip: any; }) =>  item.third_ip)));
        console.log(selectedThirdIP)
        console.log(selectedThirdIP[0])
        setSelectedThirdIP(selectedThirdIP)
        if (!thirdIP) {
            setThirdIP(selectedThirdIP[0])
        }
        console.log('thirdip = '+thirdIP)
    }, [region]);
    console.log('thirdip = '+thirdIP)

    useEffect(() => {
        const selectedFourthIP:never[] = Array.from(new Set(
            data
                .filter((item: { location: string, third_ip: string }) => item.location === region && item.third_ip === thirdIP)
                .map((item: { fourth_ip: any; }) =>  item.fourth_ip)));
        console.log(selectedFourthIP)
        console.log(selectedFourthIP[0])
        setSelectedFourthIP(selectedFourthIP)
        if (!fourthIP) {
            setFourthIP(selectedFourthIP[0])
        }
        console.log(fourthIP)

    }, [region, thirdIP]);
    console.log(fourthIP)




        <select onChange={handleRegionChange} value={region}>
            {edgeLocation.map((location) => (
                <option key={location} value={location}>
                    {location}
                </option>
            ))}
        </select>
        </p>


        <select onChange={handleThirdIPChange} value={thirdIP}>
        {selectedThirdIP.map((thirdIP) => (
            <option key={thirdIP} value={thirdIP}>
                {thirdIP}
            </option>
        ))}
        </select>.
        <select onChange={handleFourthIPChange} value={fourthIP}>
        {selectedFourthIP.map((fourthIP) => (
            <option key={fourthIP} value={fourthIP}>
                {fourthIP}
            </option>
        ))}
    </select>

At fist third_ip and fourth_ip didn’t write in useEffect, but that lead to first time open the page ,if I don’t selected the localtion third_ip and fourth_ip will be null

Tags:

2

Answers


  1. 0

    I just only thought about this

    how can i create 3 select with location, third_ip and fourth_ip, they must be related to each other. like if localtion is jp, third_ip select should be 20,21 and when selected 20 fourth_ip should be 5,6.

    try this.

    export default function App({
  data = [],
}: {
  data: { ID: number; fourth_ip: string; location: string; third_ip: string }[];
}) {
  const [locations, setLocations] = useState([]);
  const [thirdIPs, setThirdIPs] = useState([]);
  const [fourthIPs, setFourthIPs] = useState([]);
  const [selectedLocation, setSelectedLocation] = useState('');
  const [selectedThirdIP, setSelectedThirdIP] = useState('');
  const [selectedFourthIP, setSelectedFourthIP] = useState('');

  const handleLocationChange = (e) => {
    setSelectedLocation(e.target.value);
    makeThirdIPs(e.target.value);
  };
  const handleThirdIPChange = (e) => {
    setSelectedThirdIP(e.target.value);
    makeFourthIPs(selectedLocation, e.target.value);
  };
  const handleFourthIPChange = (e) => {
    setSelectedFourthIP(e.target.value);
  };

  const makeThirdIPs = (region: string) => {
    const ips = Array.from(
      new Set(
        data
          .filter(({ location }) => location === region)
          .map(({ third_ip }) => third_ip)
      )
    );
    setThirdIPs(ips);
    setSelectedThirdIP(ips[0]);
    makeFourthIPs(region, ips[0]);
  };

  const makeFourthIPs = (region: string, thirdIP: string) => {
    const ips = Array.from(
      new Set(
        data
          .filter(
            ({ location, third_ip }) =>
              location === region && third_ip === thirdIP
          )
          .map(({ fourth_ip }) => fourth_ip)
      )
    );
    setFourthIPs(ips);
    setSelectedFourthIP(ips[0]);
  };

  useEffect(() => {
    const edgeLocation = Array.from(
      new Set(data.map(({ location }) => location))
    );

    setLocations(edgeLocation);
    setSelectedLocation(edgeLocation[0]);
    makeThirdIPs(edgeLocation[0]);
  }, [data]);

  return (
    <div>
      <select onChange={handleLocationChange} value={selectedLocation}>
        {locations.map((location) => (
          <option key={location} value={location}>
            {location}
          </option>
        ))}
      </select>

      <select onChange={handleThirdIPChange} value={selectedThirdIP}>
        {thirdIPs.map((thirdIP) => (
          <option key={thirdIP} value={thirdIP}>
            {thirdIP}
          </option>
        ))}
      </select>

      <select onChange={handleFourthIPChange} value={selectedFourthIP}>
        {fourthIPs.map((fourthIP) => (
          <option key={fourthIP} value={fourthIP}>
            {fourthIP}
          </option>
        ))}
      </select>
    </div>
  );
}

    https://stackblitz.com/edit/react-ts-arjnsj?file=index.tsx

    Login or Signup to reply.
  2. 0

    Your code will become slower and slower as long as you use more useeffect.

    My suggestion is use two onChange and use a Form to refer to your selects.

    I use a lib called Ant Design. It become easier to deal with select. But if you prefer, you can code the options with map, like this:

    <select onChange={filterThird}>
   {locationsDif.map((location) => (
      <option key={location} value={location}>
         {location}
      </option>
   ))}
</select>

    The third_ip select and fourth_ip select are disabled until they are filled.
    If the location select is empty, the others will become empty too.
    Please someone let me know if there is any mistake.

    Here’s the code:

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

const component = () => {

    const [thirdIpDif, setThirdIpDif] = useState([]); 
    const [fourthdIpDif, setFourthIpDif] = useState([]); 

    const dataBase = [
        {
            "ID": 3,
            "location": "jp",
            "third_ip": "20",
            "fourth_ip": "5",
        },
        {
            "ID": 4,
            "location": "jp",
            "third_ip": "21",
            "fourth_ip": "123",
        },
        {
            "ID": 5,
            "location": "hk",
            "third_ip": "20",
            "fourth_ip": "123",
        },
        {
            "ID": 6,
            "location": "sg",
            "third_ip": "11",
            "fourth_ip": "200",
        },
        {
            "ID": 7,
            "location": "jp",
            "third_ip": "20",
            "fourth_ip": "6",
        },
        {
            "ID": 8,
            "location": "sg",
            "third_ip": "12",
            "fourth_ip": "200",
        }
    ]

    var locationsDif = dataBase.map((item) => {
        return item.location
    })
    locationsDif = [...new Set(locationsDif)]
    locationsDif = locationsDif.map((item) => {
        return {
            value: item,
            label: item
        }
    })

    const filterThird = (value) => {
        if(value){
            const auxThird = dataBase.filter((item) => 
                item.location == value
            ).map((item) => {return {
                value: item.third_ip,
                label: item.third_ip
            }})
            setThirdIpDif(auxThird);
        }
        else{
            setThirdIpDif([]);
            setFourthIpDif([]);
        }
    }

    const filterFourth = (value) => {
        if(value){
            const auxFourth = dataBase.filter((item) => 
                item.third_ip == value && item.location == formStack.getFieldValue("location")
            ).map((item) => {return {
                value: item.fourth_ip,
                label: item.fourth_ip
            }})
            setFourthIpDif(auxFourth);
        }
        else{
            setFourthIpDif([]);
        }
    }

    const [formStack] = Form.useForm();

    return (
        <Form
            form={formStack}
            scrollToFirstError={{
                behavior: 'smooth',
                block: 'center',
                inline: 'center',
            }}
            onFinishFailed={() => alert("There are wrong fields.")}
            onFinish={() => alert("There are no wrong fields.")}
            onReset={() => alert("All fields are empty now.")}
            layout="vertical" autoComplete="off"
        >
            <Form.Item name="location" label="Location">
                <Select
                    allowClear showSearch
                    filterOption={(input, option) =>
                        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                    }
                    placeholder="Location"
                    options={locationsDif}
                    onChange={filterThird}
                />
            </Form.Item>

            <Form.Item name="third_ip" label="Third Ip">
                <Select
                    allowClear showSearch
                    disabled={!(thirdIpDif.length > 0)}
                    filterOption={(input, option) =>
                        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                    }
                    placeholder="Third Ip"
                    options={thirdIpDif}
                    onChange={filterFourth}
                />
            </Form.Item>

            <Form.Item name="fourth_ip" label="Fourth Ip">
                <Select
                    allowClear showSearch
                    disabled={!(fourthdIpDif.length > 0)}
                    filterOption={(input, option) =>
                        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                    }
                    placeholder="Fourth Ip"
                    options={setores}
                />
            </Form.Item>
        </Form>
    )
}
export default component;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search