firebase 在选择框中显示数组中的项目

ni65a41a 于 2022-11-25 发布在其他

关注(0)|答案(1)|浏览(89)

我正在一个应用程序中工作，我正在从firestore数据库中获取数据（扇区数组），并将此数组添加到选择框选项中。我的问题是，我不能在单独的选项中正确显示每个项目，而是我的整个数组在选择框选项中显示在一行中。a screenshot of what my application looks like with the described problem.
负责从数据库获取数组并将其显示在选择框选项中的代码部分：

const [allSectors, setAllSectors] = useState([]);

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

  const getSectors = async () => {
    const data = await UserDataService.getAllSectorsData();
    setAllSectors(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
  };

  const FormSelect = () => {
    return allSectors.map((sector) => (
      <option key={sector.id} value={sector.id}>
        {sector.Manufacturing}
      </option>
    ));
  };

return (
    <>
   <Form onSubmit={handleSubmit}>
      <Form.Group className="mb-3" controlId="formUserSector">
         <InputGroup>
            <InputGroup.Text id="formUserSector">Sectors: </InputGroup.Text>
               <Form.Select size="sm" onChange={(e) => setSectors(e.target.value)}>
                {FormSelect()}
              </Form.Select>
         </InputGroup>
      </Form.Group>
   </Form>
   </>
)

firebase

来源：https://stackoverflow.com/questions/74565113/display-items-from-array-in-select-box-react

1条答案

按热度按时间

643ylb081#

不确定您使用的是哪个UI库。我注意到的第一件事是您使用了<option>标签，而没有用<select>标签将其包围

<option key={sector.id} value={sector.id}>
    {sector.Manufacturing}
  </option>

我假设你正在尝试实现HTML <select>下拉菜单，我认为如果你只使用标签而不使用它将只返回字符串，这就是你的例子中发生的事情。
请尝试将FormSelect函数更改为如下形式：

const FormSelect = () => {
    return (
        <select>
            {allSectors.map((sector) => (
                <option key={sector.id} value={sector.id}>
                    {item}
                </option>
            ))}
        </select>
    );
};

编辑1

从你的评论中，我注意到你的sector.Manufacturing是一个数组，但它应该是一个字符串。当你把一个数组放在像<option>{array}</option>这样的选项中时，你会得到所有的数组值压缩到一个<option>标签中。
尝试在sector.Manufacturing而不是allSector上循环。如果不看完整的代码，很难解决这个问题，但它可能看起来像这样：

const FormSelect = () => {
    return (
        <select>
            {allSectors.map((sector) => (
                <option key={sector.id} value={sector.id}>
                    {sector.Manufacturing.map((item) => {
                        return item;
                    })}
                </option>
            ))}
        </select>
      );
   };

编辑2试试这个：

const FormSelect = () => {
    return (
        <select>
            {allSectors.map((sector) =>
                sector.Manufacturing.map((item, i) => {
                    return (
                        <option key={i} value={item}>
                            {item}
                        </option>
                    );
                })
            )}
        </select>
    );
};

赞(0）回复(0）举报 2022-11-25

我来回答

firebase 在选择框中显示数组中的项目

1条答案

相关问题

热门标签

最新问答