React组件无法通过Firestore数据动态渲染选项求助

1. 异步逻辑顺序错误 #

你的setList(data)写在了Promise的then方法外面，而getDocs是异步操作，then里的代码还没执行完（还没把Firestore的数据塞进data数组），就先调用了setList，这时候data还是空数组，组件自然不会渲染任何选项。

修复：把setList(data)移到then方法内部，确保数据准备好后再更新状态：

const fetchData = () => {
    let data = []; 
    const response = getDocs(collection(db, 'listing'));

    response.then((results) => {
        let id = 1;
        results.forEach(function(doc) {
            const tempData = {id:id, name: doc.id, active: doc.data().active}
            id+=1;
            data.push(tempData);
        });
        // 移到这里，确保数据填充完成后再更新状态
        setList(data)
    })
}

2. State初始值类型不匹配 #

你初始化list为对象{}，但fetchData里要存的是数组data，后续用Object.values(list)处理数组完全没必要，直接用数组操作更直观。

修复：把state初始值改成数组：

const [list, setList] = useState([])

渲染时直接遍历数组，去掉多余的Object.values：

{list.map((item) => <option key={item.id} value={item.name}>{item.name}</option> )} 

3. JSX中误用forEach #

你在JSX里写的{Object.values(list).forEach((item) => console.log(item) )}存在问题：forEach没有返回值，会在JSX里渲染undefined，属于冗余代码。建议移除，或者改成在useEffect里打印数据：

useEffect(() => {
  console.log(list);
}, [list]);

4. 启用useEffect执行初始化请求 #

把注释掉的useEffect打开，确保组件挂载时自动触发数据请求，不用依赖点击事件：

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

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