Doubt in error . map is not a Function

Question

I created a table with 5 dropdowns, each one receiving its content from an api. But sometimes when the page reloads I get the error "filterL" is not a Function,in case it happens to any of . map I created but didn’t understand why I’m making this mistake. Can you help me understand? I’m new to React

The data I’m returning into the dropdowns is in this way for example in json:

[
{
Cdgrupo: 1,
Grupos: "VIDROS"
},
{
Cdgrupo: 2,
Grupos: "PVC"
},
{
Cdgrupo: 3,
Grupos: "ACESS VIDRO"
},
]

Follows my code:

class App extends Component{



  constructor(props) {
    super(props);
    this.state = {
        Produtos:[],
        Grupos:[],
        SubGrupos:[],
        Fabricantes:[],
        Linhas: [],
        ValorProd:'',
        ValorGP:'',
        ValorL: '',
        ValorFB:'',
        ValorSB:'',
        dados:[],
    };

}


componentDidMount() {
  Promise.all([

  fetch('http://localhost:8081/xxx/xxx/TCadastros/GetListaProdutos/'), 
  fetch('http://localhost:8081/xxx/xxx/TCadastros/GetListaGrupos/'),
  fetch('http://localhost:8081/xxx/xxx/TCadastros/GetListaSubGrupos/'),
  fetch('http://localhost:8081/xxx/xxx/TCadastros/GetListaFabricantes/'),
  fetch('http://localhost:8081/xxx/xxxx/TCadastros/GetListaLinhas/')

])

    .then(([res1, res2, res3, res4, res5]) => { 
       return Promise.all([res1.json(), res2.json(), res3.json(), res4.json(), res5.json()]) 
       })

    .then(([res1, res2, res3, res4, res5]) => {
      this.setState({Produtos:res1, Grupos:res2, SubGrupos:res3, Fabricantes:res4, Linhas:res5})

      /*console.log("Produtos: " ,res1, "Grupos: " ,res2,"SubGrupos: " ,res3, "Fabricantes: " ,res4, "Linhas: ", res5,)*/
    });
}



  render(){



      //Montagem das informações vindas do banco dentro das combos.

    let grupo1 = this.state.Grupos
    let filterGP = grupo1.map((Grupos) =>
                <option key={Grupos.Cdgrupo} >{Grupos.Grupos}</option>);


    let filterSB = this.state.SubGrupos
    let prodsSub = filterSB.map((SubGrupos) =>
                <option key={SubGrupos.CdSubGrupo}>{SubGrupos.SubGrupo}</option>
    );

    let filterL = this.state.Linhas
    let prodsL = filterL.map((Linhas) =>
                <option key={Linhas.Cdlinha}>{Linhas.Linha}</option>
    );

   let filterFab = this.state.Fabricantes
   let prodsFB = filterFab.map((Fabricantes) =>
                <option key={Fabricantes.Cdfabricante}>{Fabricantes.Fabricante}</option>


    );


  return (
    <div className="App-header">



        <form onSubmit={this.handleSubmit}>
          <div className="containerPrincipal">

          <button type="submit" className='btn-buscar btn btn-success'>Filtrar</button>


          <Input type='select' className="comboGP" style={{minWidth:"220px", width:"220px", maxWidth:"220px"}}onClick={this.handleSelectChangeGP}>
          <option value=""  >Selecione um Grupo</option>
          {filterGP}
          </Input>

          <Input type='select' className="comboSB" style={{width:"380px", minWidth:"380px",maxWidth:"380px" }} onClick={this.handleSelectChangeSB}>
          <option  value=''  >Selecione um SubGrupo</option>
          {prodsSub}
          </Input>

          <Input type='select' className="comboL" style={{width:"220px", minWidth:"220px", maxWidth:"220px"}} onClick={this.handleSelectChangeL}>
          <option  value=''  >Selecione uma Linha</option>
          {prodsL}
  </Input>

          <Input  type='select' className="comboFB"  style={{width:"450px", minWidth:"450px", maxWidth:"450px"}} onClick={this.handleSelectChangeFB} >
          <option  value=''  >Selecione um Fabicante</option>
          {prodsFB}
          </Input>

      </div>
        <table className="container-table">
          <thead>
            <tr>
              <th className='head'>Código</th>
              <th className='head'>Produto</th>
              <th className='head'>Fabricante</th>
              <th className='head'>Grupo</th>
              <th className='head'>SubGrupo</th>
              <th className='head'>Linha</th>
              <th className='head'>Preço</th>

            </tr>
          </thead>
          <tbody>
            {dados.length ?
              dados.map(dados => (
            <tr>
              <td>{dados.Cdproduto}</td>
              <td>{dados.Produto}</td>
              <td>{dados.Fabricante}</td>
              <td>{dados.Grupo}</td>
              <td>{dados.SubGrupo}</td>
              <td>{dados.Linha}</td>
              <td>{dados.Preco}</td>

            </tr>
              ))
              :
            (<tr>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
             </tr>)
              }
          </tbody>
        </table>

        </form>


      </div>  
  );
}
}
export default App;

Answer 1

Gabriel, what may be happening is that the answer is not coming as an array. See that the console presents a type error, IE, you did not receive an array but something else.

You have the option to, when giving setState put the answer inside the array, type, this.setState({ Linhas: [...res5] }) or check first if the answer comes as the same array.