我想在使用axios的反應js中使用api在下拉串列中顯示資料

我想使用 AXIOS 在選擇選項下拉串列中顯示資料。但是當我使用來自 API 的資料時，它會在無限回圈中不斷旋轉并且不在 API 中顯示資料。我正在為此使用功能組件。

API 資料格式如下：

{
    "status": 1,
    "data": [
        {
            "_id": "62982a3d8779cc4a00139ca0",
            "name": "List Category",
            "status": true,
            "createdAt": "2022-06-02T03:10:53.326Z",
            "updatedAt": "2022-06-02T03:10:53.326Z",
            "__v": 0
        },
        {
            "_id": "62984a1f3cb4c9170532736b",
            "name": "Event Name",
            "status": true,
            "createdAt": "2022-06-02T05:26:55.282Z",
            "updatedAt": "2022-06-02T05:26:55.282Z",
            "__v": 0
        }
    ],
    "message": "List categories list."
}

反應代碼：

const handleInputChange = (value) => {
  setValue(value);
};

// handle selection
const handleChange = (value) => {
  // setSelectedValue(value);
};

const fetchData = () => {
  axios
    .get('http://localhost:5080/list-categories')
    .then((response) => {
      const { data } = response;
      const arrayOfObj = Object.entries(data).map((e) => ({ [e[0]]: e[1] }));
      let tempArray = arrayOfObj.map((item, index) => {
        item.label = item.name;
        item.value = item.name;
        item.id = item.id;
        return item;
      });

      setSelectedValue(tempArray);
    })
    .catch((error) => console.log(error));
};
fetchData();

<select
  disabled={false}
  value={selectedValue}
  onChange={(e) => setSelectedValue(e.currentTarget.value)}
>
  {selectedValue.map(({ label, value }) => (
    <option key={value} value={value}>
      {label}
    </option>
  ))}
</select>;

當我運行此代碼時，它會在無限回圈中運行，并且在下拉串列中沒有顯示任何值。我只想使用 API 在下拉串列中顯示資料。但是這段代碼不起作用。請幫我解決它。我是新來的反應。我想我在回圈中有問題。請檢查。我想使用 AXIOS 在選擇選項下拉串列中顯示資料

uj5u.com熱心網友回復：

嘗試將您的fetchData呼叫嵌套到useEffect鉤子呼叫中以避免回圈：

useEffect(() => {
    const fetchData = () => {
        axios
          .get('http://localhost:5080/list-categories')
          .then((response) => {
            const { data } = response;
            const arrayOfObj = Object.entries(data).map((e) => ({ [e[0]]: e[1] }));
            let tempArray = arrayOfObj.map((item, index) => {
              item.label = item.name;
              item.value = item.name;
              item.id = item.id;
              return item;
            });
      
            setSelectedValue(tempArray);
          })
          .catch((error) => console.log(error));
      };
      fetchData();
}, []);

另外，嘗試添加條件檢查以等待加載資料：

<select
  disabled={false}
  value={selectedValue}
  onChange={(e) => setSelectedValue(e.currentTarget.value)}
>
  {!selectedValue ? (
    <>Loading data...</>
  ) : selectedValue.length === 0 ? (
    <>No data found</>
  ) : (
    selectedValue.map(({ label, value }) => (
      <option key={value} value={value}>
        {label}
      </option>
    ))
  )}
</select>;

uj5u.com熱心網友回復：

在react的useEffect中嘗試api呼叫，并使用狀態變數在react中存盤變數

• 查看更多詳細資訊 https://reactjs.org/docs/hooks-overview.html

你的代碼變得像

import React, { useEffect, useState } from 'react';
 
function app(props) {
    const [select, setSelected]  = useState('');
    const [optionList,setOptionList] = useState([]);
    const fetchData = () => {
        axios
          .get('http://localhost:5080/list-categories')
          .then((response) => {
            const { data } = response;
            if(response.status === 200){
                //check the api call is success by stats code 200,201 ...etc
                setOptionList(data)
            }else{
                //error handle section 
            }
          })
          .catch((error) => console.log(error));
      };

    useEffect(()=>{
        fetchData();
    },[])
    return (
        <select
            disabled={false}
            value={select}
            onChange={(e) => setSelected(e.currentTarget.value)}
        >
            {optionList.map((item) => (
            <option key={item._id} value={item.name}>
                {label.name}
            </option>
            ))}
        </select>
    );
}

export default app;

標籤：javascript 反应 还原 axios

上一篇：為什么useFetcher會導致重新渲染無限回圈？

下一篇：一段時間后沒有任何事情發生時的Javascript事件偵聽器