React+Firestore CRUD中select默认值未触发onChange无法取值求解

你的判断方向正确，核心问题有两个：

• categoria 状态初始值设置错误：初始值设为空数组[]，但下拉选项的value是字符串类型的分类名，类型不匹配导致React无法正确绑定默认选中值
• 分类列表是异步从Firestore拉取的，数据加载完成渲染出option后，没有主动把默认展示的第一个分类值同步到categoria状态，此时状态还是初始的空数组，用户不触发onChange的话，提交时拿到的就是错误的空值

推荐使用第一种方案，和现有逻辑适配度最高：

• 修正categoria的初始值类型，从空数组改为空字符串''
• 在分类数据拉取完成、setCategorias更新分类列表后，直接把第一个分类的名称设为categoria的默认值
• 提交表单后重置输入时，同步把categoria重置回分类列表的第一个值，避免下次提交拿空值

如果要做更严谨的交互，可以额外补充校验逻辑：

• 在select最前面加一个禁用的默认提示选项，明确引导用户操作
• 提交时校验categoria是否为空，为空就提示用户必须选择分类，从交互层面避免漏选

首先修改分类状态初始值：

// 把原代码中 const [categoria, setCategoria] = React.useState([]) 修改为
const [categoria, setCategoria] = React.useState('')

修改分类加载逻辑，数据加载完成后自动设置默认选中值：

const obtenerCategorias = async () => {
  try {
    const querySnapshot = await getDocs(collection(db, "Categorias"));
    const arrayData = querySnapshot.docs.map(doc => ({ id: doc.id,nombre:doc.data().nombre}))
    setCategorias(arrayData)
    // 分类加载完成后，默认选中第一个分类
    if(arrayData.length > 0){
      setCategoria(arrayData[0].nombre)
    }
  } catch (error) {
    console.log(error)
  }
}

修改新增条目提交逻辑，补充校验+提交后重置默认值：

const agregar = async (e) => {
  e.preventDefault()
  if(!tarea.trim()){
    console.log('内容不能为空')
    return
  }
  // 补充分类非空校验
  if(!categoria.trim()){
    console.log('请选择分类')
    return
  }
  try {
    const docRef = await addDoc(collection(db, "Articulos"), {titulo:tarea,contenido:categoria});
    setTareas([
      ...tareas,
      {titulo:tarea,contenido:categoria, id: docRef.id}
    ])
    setTarea('')
    // 提交后重置分类为默认第一个值
    if(categorias.length > 0){
      setCategoria(categorias[0].nombre)
    }
  } catch (error) {
    console.log(error)
  }
}

如果需要加提示选项，可修改select渲染代码：

<select onChange={c => setCategoria(c.target.value)} value={categoria} className="form-control mb-2">
  {/* 新增禁用的默认提示项 */}
  <option value="" disabled>请选择分类</option>
  {
    categorias.map(item2 => (
      // 补充key属性，消除React渲染警告
      <option key={item2.id} value={item2.nombre}>{item2.nombre}</option>
    ))
  }
</select>

额外注意：现有编辑逻辑中contenido字段写死为"my content"，后续开发需要同步绑定categoria状态；渲染任务列表的tr元素也需要补充唯一key属性，避免React抛渲染警告。

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