React Bootstrap Select组件尺寸设置不生效，样式未加载求助

从服务器获取数据后，使用React Bootstrap的Form.Select组件展示数据，分别设置了lg（大）、默认、sm（小）三种尺寸，但样式未被应用，所有Select组件显示尺寸完全一致。

原代码 #

import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import Form from 'react-bootstrap/Form';

import './App.css';

function App() {

const [data, setData] = useState({}); //initial value is an empty object

useEffect(() => { 
  fetch("/home") //move to separate funcion in separate file to make it easy to test and reuse?
    .then((res) => {
      console.log(`got response: ${JSON.stringify(res)}`);
      return res.json();  //return json from res
    })
    .then((data) => { //data is the json returned previously. Promise chaining
      console.log(`data : ${JSON.stringify(data)}`);        
      setData(data) //override previous value of data object with value of received json object. 
    });
}, []);

  
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Form.Select id="resultfromserver" size="lg" aria-label="Large select example">
          {!data ? "No data received" : Object.keys(data).map(key => (
            <option key={key} value={key}>{data[key]}</option>)) 
          }
        </Form.Select>
        <br />
        <Form.Select id="resultfromserver"  aria-label="Default select example">
          {!data ? "No data received" : Object.keys(data).map(key => (
            <option key={key} value={key}>{data[key]}</option>)) 
          }
        </Form.Select>
        <br />
        <Form.Select id="resultfromserver" size="sm" aria-label="Small select example">
          {!data ? "No data received" : Object.keys(data).map(key => (
            <option key={key} value={key}>{data[key]}</option>)) 
          }
        </Form.Select>
      </header>
    </div>
  );
}

export default App;

错误原因分析 #

• 未引入React Bootstrap核心样式：React Bootstrap组件的样式依赖官方提供的Bootstrap CSS文件，若未引入，size属性对应的尺寸样式无法生效。
• 重复使用同一个id：三个Form.Select都用了id="resultfromserver"，违反HTML中id唯一性的规范，可能导致样式或交互异常。
• 初始状态判断逻辑错误：useState初始值是空对象{}，在布尔判断中!data永远为false，导致"无数据"的提示无法正常显示。

修正方案 #

1. 引入Bootstrap样式文件：在项目入口文件（如index.js）或当前App.js中添加样式导入：

import 'bootstrap/dist/css/bootstrap.min.css';

2. 设置唯一id：给每个Select组件分配不同的id，避免冲突。
3. 修正空数据判断逻辑：改用Object.keys(data).length === 0来判断是否未获取到数据。

修正后的代码 #

import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import Form from 'react-bootstrap/Form';
import 'bootstrap/dist/css/bootstrap.min.css'; // 新增：引入Bootstrap样式
import './App.css';

function App() {
  const [data, setData] = useState({});

  useEffect(() => { 
    fetch("/home")
      .then((res) => res.json())
      .then((data) => {        
        console.log(`data : ${JSON.stringify(data)}`);        
        setData(data);
      });
  }, []);

  const hasData = Object.keys(data).length > 0;
  
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Form.Select id="result-large" size="lg" aria-label="Large select example">
          {!hasData ? "No data received" : Object.keys(data).map(key => (
            <option key={key} value={key}>{data[key]}</option>)) 
          }
        </Form.Select>
        <br />
        <Form.Select id="result-default" aria-label="Default select example">
          {!hasData ? "No data received" : Object.keys(data).map(key => (
            <option key={key} value={key}>{data[key]}</option>)) 
          }
        </Form.Select>
        <br />
        <Form.Select id="result-small" size="sm" aria-label="Small select example">
          {!hasData ? "No data received" : Object.keys(data).map(key => (
            <option key={key} value={key}>{data[key]}</option>)) 
          }
        </Form.Select>
      </header>
    </div>
  );
}

export default App;

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