如何使用 onClick function 进行 API 调用以在 React 中呈现数据列表？

Question

I want to fetch data for a dependent API call and render the returned data as a list or table. Here's my code below

function Informal() {
  const [myLga, setMyLga] = useState([]);
  const [ward, setWard] = useState([]);
  const [wardCount, setWardCount] = useState([]);
  const [facility, setFacility] = useState([]);
  const [selectedLga, setSelectedLga] = useState("");
 

  const getLga = async (e) => {
    try {
      const fetchLocal = await Axios.get(
        "https://pshs3.herokuapp.com/informal/counts"
      );
      const item = Object.keys(fetchLocal.data.data);
    
      setMyLga(item);
    } catch (err) {
      console.log(err);
    }
  };

  const handleWard = (e) => {
    const result = e.target.value;
    Axios.get(`https://pshs3.herokuapp.com/${result}/informal/counts`).then(
      (response) => {
        const myWard = Object.keys(response.data.data);

        setWard(myWard);
       
      }
    );
  };
  
  const handleFac = (e) => {
   const output = e.target.value
    Axios.get(
      `https://pshs3.herokuapp.com/${output}/ward/details`
    ).then((response) => {
        const details = response.data.data;
        console.log(details)
    
    });

  };

  useEffect(() => {
    getLga();
  }, []);



  return (
    
        <Container >

          <div>
//Lga
              <TextField
                name="lga"
                select
                label="LGA"
                value={selectedLga}
                onChange={handleWard}
                SelectProps={{
                  native: true,
                }}
                sx={{
                  width: "23ch",
                }}
              >
                <option value="">Select LGA </option>
                {myLga?.map((curr) => (
                  <option key={curr}>{curr}</option>
                ))}
              </TextField>
             
               
//wards
              <div>
                <div>
                  {ward?.map((dep, id) => (
                    <p
                      style={{
                        cursor: "pointer",
                        borderLeft: "2px green",
                        borderLeftStyle: "solid",
                        paddingLeft: "5px",
                      }}
                      onClick={handleFac}
                      key={id}
                      
                    >
                      {dep}
                    </p>
                  ))}
                </div>
               
              </div>
            
//list of details
              <div>
                <h4>Details</h4>
                <ul>
                  {facility?.map((tul, index) => (
                    <li key={index}>{tul.name}</li>
                  ))}
                </ul>
              </div>
           
          </div>

        </Container>
      
  );
}

export default Informal;

The idea is, Lga is a dropdown while wards should be a list and details is a list. The lga fetch works fine. on selected lga, a fuction triggers to list the wards. finally onclick on the p tags triggers to fetch the details. my issues lies on the handleFac function as it returns an empty array thus not rendering on the UI. please what am i doing wrong here. I appreciate any idea or help

Answer 1

Issue is e.target.value was undefined for onClick handler for p tags.

1. Change the onClick handler invoking like below.

<p
    ...
    ...
    onClick={() => handleFac(dep)}
    ...
>
    {dep}
</p>

2. Change handleFac like below.

const handleFac = dep => {
    Axios.get(`https://pshs3.herokuapp.com/${dep}/ward/details`).then(
        response => {
            const details = response.data.data;
            setFacility(details);
        }
    );
};