Блог

Главная - Вопросы по программированию - SQL-поиск и JavaScript .map-это не функция

SQL-поиск и JavaScript .map-это не функция

#javascript #sql #reactjs #postgresql

Вопрос:

Я гуглил, чтобы попытаться решить свою проблему без успеха.

Сначала я понимаю, что «.map» — это метод для массива, но переменная «рестораны» находится в моем состоянии использования. Поэтому я не понял, почему я получаю ошибку «Ошибка типа: рестораны.карта не является функцией».

Я пытаюсь реализовать функцию поиска в приложении PERN, которое я изучал. Это мой компонент поиска.

Пожалуйста, помогите мне понять, что может быть не так. Это полное репо в случае, если этого фрагмента кода недостаточно.

Компонент поиска:

 import React, { useState } from "react";

function Search() {
  const [name, setName] = useState("");
  const [restaurants, setRestaurants] = useState([]);

  const onSubmitForm = async (e) => {
    e.preventDefault();
    try {
      const response = await fetch(
        `http://localhost:3001/api/v1/restaurants/?name=${name}`
      );

      const parseResponse = await response.json();

      setRestaurants(parseResponse);
    } catch (err) {
      console.error(err.message);
    }
  };

  return (
    <>
      <div className="mb-4">
        <form className="form-row" onSubmit={onSubmitForm}>
          <input
            type="text"
            name="name"
            placeholder="Search"
            className="form-control"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
          <button className="btn btn-success">Submit</button>
        </form>
        <table className="table my-5">
          <thead>
            <tr>
              <th>Restaurant</th>
            </tr>
          </thead>

          <tbody>
            {restaurants.map((restaurants) => (
              <tr key={restaurants.restaurants_id}>
                <td>{restaurants.name}</td>
                <td>{restaurants.location}</td>
              </tr>
            ))}
          </tbody>
        </table>
        {restaurants.length === 0 amp;amp; <p>No Results Found</p>}
      </div>
    </>
  );
}

export default Search;

Файл в server.js:

 app.get("/api/v1/restaurants", async (req, res) => {
  try {
    const { name } = req.query;

    const restaurants = await pool.query(
      "SELECT * FROM restaurants WHERE name || ' ' ||",
      [`%${name}%`]
    );

    res.json(restaurants.rows);
  } catch (err) {
    console.error(err.message);
  }
});

Комментарии:

1. В чем заключается содержание parseResponse ?

2. Должно быть то, что есть в моей базе данных Postgres. Имя, получаемое из api.

3. Я думаю, что вы должны обрабатывать свой пустой массив ресторанов до тех пор, пока его состояние не будет обновлено из HTTP-ответа. можете ли вы попробовать изменить это в своем коде реакции — <tbody> { restaurants.length > 0 amp;amp; restaurants.map((restaurants) => (...) } <tbody>

4. Круто. С помощью этого я получил доступ к .map не является функцией, но SQL не возвращает фильтр с поиском. {restaurants.length > 0 amp;amp; restaurants.map((restaurants) => ( <tr key={restaurants.restaurants_id}> <td>{restaurants.name}</td> <td>{restaurants.location}</td> </tr> ))}

5. можете ли вы выполнить console.log() вашего select * from ... запроса и попробовать выполнить этот простой запрос в интерфейсе postgre SQL? или вставьте его сюда, чтобы мы могли выяснить синтаксическую ошибку, если таковая имеется.

Ответ №1:

Чтобы избавиться от javascript.map ошибки не является функцией в коде реакции, вы должны заменить tbody код реакции следующим образом, чтобы обработать пустой массив ресторанов, пока его состояние не будет обновлено из HTTP-ответа.

 <tbody>
{
    restaurants.length > 0 amp;amp; restaurants.map((restaurants) => (
    <tr key={restaurants.restaurants_id}>
        <td>{restaurants.name}</td>
        <td>{restaurants.location}</td>
    </tr>
    ))
}
</tbody>

Ваш еще один вопрос, связанный с тем, что вы не получили ответа от серверной части для вашего SQL-запроса postgre, вы должны console.log() выполнить свой запрос и попробовать запустить его в интерфейсе SQL, чтобы найти синтаксические ошибки.

Метки: