React JS 中三个依赖组合的形式问题

Question

我在具有三个相关组合的 React 应用程序中遇到“props.options.map 不是函数”问题。

App.js 的代码，它有一个主要的 ComboApp 函数，带有三个钩子：

社区价值 省份选项， 直辖市选项

import React, {useState} from "react";
import Comunidades from './components/comunidades';
import Provincias from "./components/provincias";
import Municipios from "./components/municipios";

let comunidadSeleccionada, provinciaSeleccionada, municipioSeleccionado;

const ComboApp = () => {
  const [comunidadesValue, setComunidadesValue]= useState("");
  const [provinciasOpciones, setProvinciasOpciones]= useState([]);
  const [municipiosOpciones, setMunicipiosOpciones]= useState([]);

加载第一个组合的函数是下一个：

  const handleComunidadesChange = (event) =>{

    // We link to the change event

    const selectedValue = event.target.value;
    comunidadSeleccionada = selectedValue;

    document.getElementById('mensaje').innerHTML = '';

    setComunidadesValue(selectedValue);

    switch(selectedValue){
      case 'Euskadi':
          setProvinciasOpciones(['Araba','Bizkaia','Gipuzkoa']);
          break;
       case 'Aragon':
          setProvinciasOpciones(['Zaragoza','Huesca','Teruel']);
          break;  
       case 'Canarias':
           setProvinciasOpciones(['Las Palmas','Tenerife']);
           break;  
       default: setProvinciasOpciones([]);  
    }
  };

填充第二个组合的那个：

  const handleProvinciasChange = (event) =>{

    // We link to the change event
    const selectedValue = event.target.value;
    provinciaSeleccionada = selectedValue;

    document.getElementById('mensaje').innerHTML = '';

    setProvinciasOpciones(selectedValue);

    switch(selectedValue){
      case 'Araba':
        setMunicipiosOpciones(['Gasteiz','Laguardia','Oion']);
        break;
       case 'Bizkaia':
          setMunicipiosOpciones(['Bilbo','Barakaldo','Durango']);
          break;  
       case 'Gipuzkoa':
          setMunicipiosOpciones(['Donosti','Arrasate','Eibar']);
        break;  
        default: setMunicipiosOpciones([]);     
    }
  };


  return(<>
    <div>
      <Comunidades handleChange={handleComunidadesChange}/>{" "}
      <br/>
      <Provincias opciones={provinciasOpciones} handleChange={handleProvinciasChange}/>{" "}
      <br/>
      <Municipios opciones={municipiosOpciones} handleChange={handleMunicipiosChange}/>{" "}
    </div>
    <div id="mensaje"></div>
  </>
  );
};

export default ComboApp;

第一个组合没有问题。当试图填写第二个时出现：

“props.opciones.map 不是函数”

Comunidades.js 有：

import React from 'react';

const ComunidadesAutonomas = (props) => {
    return(
        <div>
            <label>Comunidades Autonomas</label>
            <select onChange={props.handleChange}>
                <option value="">Seleccione una Comunidad Autónoma</option>
                <option value="Euskadi">Comunidad Autónoma Vasca</option>
                <option value="Aragon">Aragon</option>
                <option value="Canarias">Canarias</option>
            </select>
        </div>
    );
};

export default ComunidadesAutonomas;

provincias.js:

const Provincias = (props) => {
    return(<>
        <div>
            <label>Provincias</label>
            <select onChange={props.handleChange}>
                <option value="">Seleccione una provincia</option>
                    { props.opciones.map((opcionProvincia)=>(
                        <option key={opcionProvincia} value={opcionProvincia}>
                            {opcionProvincia}
                        </option>

                    ))}
            </select>
        </div>
    </>);
};

export default Provincias;```

I know that the error is in props.options.map((opcionProvincia) and it must be a array but i dont know how to solve.