从 API 加载数据后，PrimeReact Select Item 为空

问题描述

我的功能组件如下：

const Scratch = () => {

 const [isLoaded,setIsLoaded] = useState(false);
 const colorSelectItems=[];
 const [selectedColor,setSelectedColor] = useState("fffff");

 useEffect(() => {
    fetch(
           `http://localhost:8765/fetchData?userId=1`
         )
      .then((response) => response.json())
      .then((data) => {
       createDropDown(data));
       setIsLoaded(true);
      });
  },[]);

 const createDropDown= (data) => {
    data.map((color) => {
      colorSelectItems.push({
        label: color.colorName,value: color.hexValue,});
    });

 return (
     <div className="commonMargin">
         {!isLoaded&& <p>Loading..</p>}
         {isLoaded&& (
           <Dropdown
            value={selectedColor}
            optionLabel="label"
            options={colorSelectItems}
            onChange={(e) => setSelectedColor(e.target.value);}
           />
          )}
     </div>
  );
};

export default Scratch;

问题是，它在 API 调用完成之前一直显示 Loading...，然后它正在呈现 DropDown。但是即使API调用完成后，DropDown还是空的！

我在这里遗漏了什么？

PS：如果我将从 API 中获取数据替换为从本地 json 文件中获取数据，则此 DropDown 可以完美运行

解决方法

试试这个。如果有任何问题请回复

const Scratch = () => {

 const [isLoaded,setIsLoaded] = useState(false);
 const colorSelectItems=[];
 const [selectedColor,setSelectedColor] = useState("fffff");

 useEffect(() => {
    fetch(
           `http://localhost:8765/fetchData?userId=1`
         )
      .then((response) => response.json())
      .then((data) => {
       var temp=data?.map((item)=>({label: item?.colorName,value: item?.hexValue }));
       colorSelectItems=temp;
       setIsLoaded(true);
      });
  },[]);
     
 return (
     <div className="commonMargin">
         {!isLoaded&& <p>Loading..</p>}
         {isLoaded&& (
           <Dropdown
            value={selectedColor}
            optionLabel="label"
            options={colorSelectItems}
            onChange={(e) => setSelectedColor(e.target.value);}
           />
          )}
     </div>
  );
};

export default Scratch;