Bootstrap/Reactstrap遍历数组后按钮组末尾出现空按钮问题

I’ve run into this exact head-scratcher before with Reactstrap—let’s break down what’s likely happening and how to squash that rogue empty button.

First, let’s rule out the obvious: your options array looks solid (21 elements total, no empty values), so the issue isn’t in the array itself. Here are the most common culprits and fixes:

1. Accidental Text Nodes in Your JSX #

React treats whitespace (newlines, spaces) between JSX elements as text nodes, and sometimes Reactstrap’s ButtonGroup will render these as empty buttons if they’re not ignored.

Check your ButtonGroup code—if it looks like this:

<ButtonGroup>
  {this.state.options.map(option => (
    <Button key={option}>{option}</Button>
  ))}
  
</ButtonGroup>

That extra newline/spaces after the map call is getting parsed as a text node. Fix it by tightening up your JSX:

<ButtonGroup>{this.state.options.map(option => (
  <Button key={option}>{option}</Button>
))}</ButtonGroup>

Or wrap your mapped elements in a React.Fragment to eliminate stray whitespace:

<ButtonGroup>
  <React.Fragment>
    {this.state.options.map(option => (
      <Button key={option}>{option}</Button>
    ))}
  </React.Fragment>
</ButtonGroup>

2. Unintended Undefined Returns in Your Map #

Double-check your map function to make sure every iteration returns a valid Button component. If you’ve added any conditional logic that might return undefined (even accidentally), React will skip rendering that item—but sometimes Reactstrap can misinterpret this as an empty button.

For example, avoid code like this:

{this.state.options.map(option => {
  if (option !== 'Mean') { // If this skips 'Mean' without a fallback return
    return <Button key={option}>{option}</Button>
  }
  // No return here = undefined
})}

Ensure every case returns either a Button or null (which React safely ignores):

{this.state.options.map(option => (
  option ? <Button key={option}>{option}</Button> : null
))}

3. Popover Layout Quirks #

Since you mentioned this is inside a Popover, it’s possible the Popover’s default styling or internal elements are leaking into your ButtonGroup. Check if you’re using any Popover props that add extra buttons (like closeButton)—if so, make sure it’s positioned outside your ButtonGroup.

Also, use your browser’s dev tools to inspect the "empty button": right-click it, select "Inspect", and check its class names and parent elements. This will tell you if it’s a stray Button component, a styling artifact, or an unexpected element from the Popover’s structure.

Quick Debug Step #

First, log the length of your options array to confirm it’s exactly 21:

constructor(props) {
  super(props);
  this.toggle = this.toggle.bind(this);
  this.state = {
    options: [5,10,15,20,25,30,35,40,45,50,'Mean',55,60,65,70,75,80,85,90,95]
  }
  console.log(this.state.options.length); // Should log 21
}

If it logs more than 21, you’ve got an invisible empty element in your array (common if you accidentally added a trailing comma in some environments).

内容的提问来源于stack exchange，提问作者strumpy_strudel