React- .map is not a function

user_14020570 0
Viewed 83

i have app built on node.js backend and react.js frontend. For code in react keeps throwing an error:

 import './App.css';
 import React, {useState, useEffect } from 'react';
 import Axios from 'axios';
    
 function App() {
   const [material, setMaterial] = useState("");
   const [materialList, setMaterialList] = useState([])

   useEffect(()=> {
     Axios.get('http://127.0.0.1:3001/api/get').then((response)=>{
       setMaterialList(response.data);
     });
   }, []);
 
   return (  
    <div className="App">
      <h1>TEST</h1>

      <div className="form">
      <label>Search Data from DB</label>
      <input type="text" name="material" />
      
      {materialList.map((val)=>{
          return
           <h1>
             Material: {val.material}
          </h1>
        })
      }
      </div> 
    </div>
  );
}

export default App;

It still reports me an error that materialList.map is not function.

And I can't always figure out why.

EDIT: Here is api section from backend part index.js:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
const sql = require("mssql");

const dbConfig = {

  server: 'host',
  user: 'user',
  password: 'pass',
  database: 'database',
  options: {
    trustedConnection: true,
    encrypt: true,
    enableArithAbort: true,
    trustServerCertificate: true,

  },

};
app.use(cors());
app.use(express.json());
app.use(express.json());
app.use(express.urlencoded({
    extended: true
}));

app.get('/api/get', (req,res)=>{
    var dbConn = new sql.ConnectionPool(dbConfig);
    dbConn.connect().then(function () {
        var request = new sql.Request(dbConn);
        request.query("Select TOP(10) * FROM [dbo].[Visual]").then(function (resp) {
            res.send(resp);
            dbConn.close();
        }).catch(function (err) {
            console.log(err);
            dbConn.close();
        });
    }).catch(function (err) {
        console.log(err);
    });
});

app.get('/', (req,res) => {
    res.send("Hello Friend");
});
app.listen(3001,()=>{
    console.log("running on port 3001");
});

When I run the node.js server itself and give url / api / get it will show me correctly. But it is true that in recordset format. Maybe in this error?

reactjs
1 Answers

I've probably solved it already. My api comes with an MSSQL connection. And I used the wrong notation in the assignment. Because the result of my query is in the form of a recordset, I have to change the frontend, especially in the area around useEffect. I enclose the current state, which returns to me what I require. But if I am wrong that it is related to MSSQL and recordset, please correct me.

import './App.css';
import React, { useState,useEffect } from 'react';
import Axios from 'axios';


function App() {
  const[materialList, setMaterialList]= useState({recordset: [] });


 useEffect(()=> {
   const getMaterial=async()=>{
     const response = await Axios.get("http://localhost:3001/api/get");
      setMaterialList(response.data);
   }
   getMaterial();
    
   }, []);
  
 
 
  return (  
    <div className="App">
      <h1>Test</h1>

      <div className="form">
      <label>Search Data from DB</label>
      <input type="text" name="material" />
      

     {materialList.recordset.map(value=>{
       return <h1>Material ID: {value.MojeID}</h1>
      })}
      
      
      </div> 
    </div>
  
  );
}

export default App;
user_140205700
Related