在反应中从状态填充选择元素

Question

这里的新反应开发人员，试图通过编码学习，在这里我坚持使用简单的选择元素，我有选择元素并在其中使用地图填充选项，我也在安慰在地图中记录我的数据并获得 '50正在获取数据 FUNDING_ACCOUNT'。

我想要实现的是：用户单击并获取“data.name”作为下拉列表的选择元素，我的错误在哪里？

英语不是我的母语，所以可能会出现错误。

我正在使用 fetch 填充“setUpdateSelect”

我的代码：

  const [updateSelect, setUpdateSelect] = useState([]);


<select>
          {updateSelect.map((data) => {
            console.log("getting data", data.name);
            <option key={data.name} value={data.name}>
              {data.name}
            </option>;
          })}
        </select>

Answer 1

使用地图功能，它应该返回一些东西。在您的地图函数中，它不会返回任何内容。

修改代码

{updateSelect.map((data) => {
   console.log("getting data", data.name);
    return (
      <option key={data.name} value={data.name}>
        {data.name}
      </option>
    );
})}

现在应该可以正常工作了。

谢谢，

阿吉斯·查克拉博蒂。

Answer 2

对于重新渲染，可以这样使用；

const [updateSelect, setUpdateSelect] = useState([]);
const [loading, setLoading] = useState(false);


useEffect(() => {
 setLoading(true);
 setUpdateSelect(yourdata);
 setLoading(false);

},[yourdata])


return !loading ? (
<select>
 updateSelect.map((data, index) => (
  <option key={index} value={data.name}> 
   {data.name}
  </option>
 )
</select>
) : null; 

Answer 3

const [updateSelect, setUpdateSelect] = useState([]);

<select>
    {updateSelect.map((data) => {
        return( console.log("getting data", data.name);
                <option key={data.name} value={data.name}>
                  {data.name}
                </option>;)
               
     })}
</select>