Как отобразить данные с express в реакт компоненте?

Question

[adizh]

Как отобразить данные с express в компоненте реакт?

server.js:

const express = require('express');
const bodyParser = require('body-parser');
const server = express();
const port = process.env.PORT || 8080;
const cors = require('cors');
server.use(cors());
server.use(bodyParser.json());


server.get('/api/v1/startup', (req, res) => {
    res.sendDate(
        [{"startup_id":1,"startup_name":"Movies","startup_descr":"Wolf spider","startup_price":"$0.08"},
        {"startup_id":2,"startup_name":"Clothing","startup_descr":"Jabiru stork","startup_price":"$2.46"},
        {"startup_id":3,"startup_name":"Outdoors","startup_descr":"Fox, asian red","startup_price":"$4.06"},
        {"startup_id":4,"startup_name":"Outdoors","startup_descr":"Tapir, brazilian","startup_price":"$2.31"},
        {"startup_id":5,"startup_name":"Outdoors","startup_descr":"Blue wildebeest","startup_price":"$0.34"},
        {"startup_id":6,"startup_name":"Electronics","startup_descr":"Bushbuck","startup_price":"$7.35"},
        {"startup_id":7,"startup_name":"Beauty","startup_descr":"Red sheep","startup_price":"$6.67"},
        {"startup_id":8,"startup_name":"Tools","startup_descr":"Mocking cliffchat","startup_price":"$4.90"},
        {"startup_id":9,"startup_name":"Industrial","startup_descr":"Flamingo, chilean","startup_price":"$2.88"},
        {"startup_id":10,"startup_name":"Games","startup_descr":"Racer, blue","startup_price":"$8.71"},
        {"startup_id":11,"startup_name":"Baby","startup_descr":"Gecko, bent-toed","startup_price":"$2.92"}]
    )
});
server.listen(port);

В react компоненте, я сперва импортирую этот json под именем data, использую map для отображения данных, но получаю ошибку:

TypeError: Cannot read property 'prototype' of undefined

Answer 1

[Тигран Абрамян]

function App() {
  const [ startupData, setStartupData ] = React.useState([]);

  React.useEffect(() => {
    fetch('http://localhost:8080/api/v1/startup')
      .then(res => res.json())
      .then(data => setStartupData(data))
      .catch(err => console.error('Err: ', err));
  }, []);

  if (startupData?.length === 0) {
    return <h1>Loading...</h1>;
  }

  return (
    <div>
      <table border="2">
        <thead>
          <tr>
            <td>startup_id</td>
            <td>startup_name</td>
            <td>startup_descr</td>
            <td>startup_price</td>
          </tr>
        </thead>

        <tbody>
          {startupData?.map(startup => (
            <tr key={startup.startup_id}>
              <td>{startup.startup_id}</td>
              <td>{startup.startup_name}</td>
              <td>{startup.startup_descr}</td>
              <td>{startup.startup_price}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

Comments

[adizh]

При открытии страницы loading выходит и данные не загружаются(очень долгое время)

[Gary_Ihar]

adizh, на сервере данные оберни в JSON.stringify(тут твой массив объектов)

[adizh]

Gary_Ihar, так же проблема, а в консоли при catch выходит: GET https://localhost:8080/api/v1/startup net::ERR_CONNECTION_REFUSED. Может проблема в сервере?

[Тигран Абрамян]

adizh, замените
res.sendDate
на
res.json

[Gary_Ihar]

adizh, если не поможет ответ выше то:
bodyParser.json() - устарело вроде как. Используй server.use(express.json());. И в ответе не res.sendDate(...), a res.send(...).

Я в ноде не секу, а эту инфу со своего пет проекта вытянул. А его собирал по документации. У меня работает.