PrimeReact Select 从 API 加载数据后项目为空

Question

我的功能组件如下：

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;

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

我在这里错过了什么？

PS：如果我将从 API 获取数据替换为从本地 json 文件

获取数据，此 DropDown 将完美运行

Answer 1

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

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;

PrimeReact Select 从 API 加载数据后项目为空

PrimeReact Select Item is empty after loading data from API

fetch

jsx

reactjs

primereact

use-effect