Javascript 将元素添加到现有的React下拉按钮

我正在使用react和react boostrap

我已经创建了一个下拉按钮，它在渲染时没有下拉菜单。项目元素在里面。调用useEffect时，我试图将服务器的结果附加到下拉按钮中

我的HTML如下所示：

---

您可以根据

jsx

中的模型添加元素

const Component = ({items}) => {
   return (
   <Container className="mt-3">
    <InputGroup>
      <DropdownButton as={InputGroup.Prepend} title="Existing Label" id="input-group-dropdown-1">
        {
           items.map((name, index) => (<DropdownButton.Item key={index}>{name}</DropdownButton.Item>))
        }
      </DropdownButton>
      <FormControl id="nameForm" placeholder="Name of person" />
      <FormControl id="labelForm" placeholder="Label: Criminal or Citizen" />
    </InputGroup>
  </Container>
   )
}

const组件=（{items}）=>{
返回(
{
items.map（（名称，索引）=>（{name}））
}
)
}

---

假设条目是要添加到下拉列表中的字符串数组

根据您的注释，您的响应是一个数组。您可以将该数组设置为任何状态

如果您使用的是功能组件，那么可以这样做

const [dropdown,setDropdown] = React.useState([]);

// Inside your useEffect  you can do something like this

useEffect(()=>{
// After your server response
setDropdown(response);
},[])

// Then your jsx will be like this

    <DropdownButton as={InputGroup.Prepend} title="Existing Label" id="input-group-dropdown-1">
      {dropdown.map((item,i)=><Dropdown.Item key={i}>{item}</Dropdown.Item>)}
    </DropdownButton>

const[dropdown，setDropdown]=React.useState（[]）；
//在你的useEffect中，你可以做这样的事情
useffect（（）=>{
//在服务器响应之后
设置下拉（响应）；
},[])
//那么您的jsx将是这样的
{dropdown.map（（item，i）=>{item}）}

---

这将仅在服务器响应后显示数据，因此我希望这会有所帮助

您能显示服务器的响应吗？我的意思是，如果它是一个对象中的数据，你可以将它放在一个数组中，并将该数组设置为任何状态，然后将其映射到jsx中？从服务器返回的数组包含4个元素，都是字符串。数组（4）[“Person_1”、“Person_2”、“Person_3”、“Person_4”]我忘了提到，上面的代码是在循环中运行的，用于迭代每个字符串。我不相信弦或数组的处理是当前的问题。传递简单字符串而不接触array会产生相同的结果。在渲染后调用useEffect时是否可以这样做？我需要先从我的服务器获取这些项目，然后才能将它们发送到下拉列表按钮。如果您没有来自该州的数据，只需提供一个空列表并进行更新，它将自动重新加载下拉列表。只是项目不必由重新招标的组件的

道具

或

状态

提供谢谢，这确实让我走上了正确的方向。谢谢你的帮助：）这只是我评论的补充。我在向下拉项添加onClick属性时遇到问题。事实证明，自2018年以来，他的产品一直是bootstrap中的一个bug。可以通过将函数调用封装在另一个函数调用“（）=>functionHere（）”中来解决此问题。这导致了如下更改：{dropdown.map（（item，i）=>addOnClickToId（item）}id={item}>{item}}}总之，现在一切正常：）