У меня есть приложение node / express, использующее React для интерфейса. Все отлично работает в режиме разработки, где есть прокси-сервер между серверной частью, работающей на localhost:5000, и интерфейсом на localhost:3000. Однако у меня возникла проблема с производственной сборкой, когда я получаю статические файлы React из папки build, включив в свой основной файл сервера следующее:

app.use(express.static(path.join(__dirname, "client", "build")));
app.get("*", function (req, res) {
  res.sendFile("index.html", {
    root: path.join(__dirname, "client", "build"),
  });
});

При такой настройке я могу видеть приложение React на localhost:5000, но на определенных маршрутах / страницах я получаю TypeError: a.map is not a function. Кажется, что все ошибки вызваны массивами, созданными в провайдере context, который устанавливает состояние из API с помощью axios. Вот пример одного из вызовов API:

  const getNodesApi = {
    url: "model/get-all-nodes",
    method: "GET",
    headers: {
      token: localStorage.token,
    },
  };
  async function getNodeData() {
    await axiosPm(getNodesApi)
      .then((response) => {
        const resData = response.data;
        setNodeData(resData);
        setLoading(false);
      })
      .catch((error) => {
        console.log(error.response);
      });
  }

Есть ли что-то, что мне нужно сделать, чтобы установить базовый URL-адрес для API, или что-то еще может вызвать TypeError: a.map is not a function?

Изменить 1: пример, когда .map не работает

  const [options, setOptions] = useState(
    processes.map((process, index) => ({
      key: index,
      value: process.process_id,
      label: process.process_name,
    }))
  );

В этом примере processes поступает от поставщика context. Первоначально это определяется:

const [processes, setProcesses] = useState([]);
0
userNick 15 Окт 2020 в 02:25

1 ответ

Лучший ответ

Отвечая на свой вопрос для наглядности. Проблема была вызвана тем, что я монтировал свои внутренние маршруты / маршруты API после выполнения app.get для React index.html. Чтобы решить эту проблему, сначала смонтируйте внутренние маршруты.

app.use(express.static(path.join(__dirname, "client", "build")));

//Routes - mounted from backend for API
mountRoutes(app);

//Routes - use from React app for frontend
app.get("*", function (req, res) {
  res.sendFile("index.html", {
    root: path.join(__dirname, "client", "build"),
  });
});
0
userNick 17 Окт 2020 в 18:41