Блог

Главная - Вопросы по программированию - Ошибка типа: Не удается прочитать свойство «карта» неопределенного в React Map

Ошибка типа: Не удается прочитать свойство «карта» неопределенного в React Map

#javascript #reactjs #react-redux #react-hooks

Вопрос:

Я создаю веб-сайт электронной коммерции с помощью react, есть ошибка при перенаправлении между страницами Проблема: Когда требуется перенаправить на страницу с одним продуктом со страницы категории, появляется ошибка «Не удается прочитать .карта не определена», но при обновлении страницы страница видна. Кроме того, то же самое, когда вы хотите перенаправить на домашнюю страницу со страницы одного продукта. Приведенный ниже код взят со страницы Категории . в usequery я использую isloading, iserror и isSuccess в функции возврата, как показано ниже

 const {
    isLoading,
    isError,
    error,
    data: res,
    isSuccess,
  } = useQuery("product", () => Axios.get(`/Product/AllProduct`));
  
  
  // spinner when data loads
  if (isLoading) {
    return (
      <Col className="text-center" md="12">
        <div className="uil-reload-css reload-background mr-1 align-center">
          <div className="" />
        </div>
      </Col>
    );
  }
  if (isError) {
    return (
      <div>
        <h1 className="title text-center">
          {error.message}
          <br />
          <p className="error-msg text-center">
            Weamp;apos;;re sorry, There is an error encounter.
            <br />
            Please retry again after few minutes.
          </p>
        </h1>
      </div>
    );
  }

 {isSuccess amp;amp;
          res.data.Result.map((product) => (
            <Col key={product.ID} md="4" sm="4">
              <Card className="card-product card-plain">
                <div className="card-image">
                  <img
                    alt={product.Name}
                    className="img-rounded img-responsive"
                    src={`/api/v1/ProductFile/${encodeURIComponent(
                      product.ID
                    )}/Product/${encodeURIComponent(product.ProductImages[0])}`}
                  />
              </Card>

введите описание изображения здесь

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

1. Карта работает только с типами массивов, а не с любыми другими типами. Проверьте один раз, используете ли вы .map() только для массива.

2. не могли бы вы поделиться структурой ответа здесь ?

Ответ №1:

Используйте условный оператор перед отображением, как это:

 {isSuccess amp;amp; res amp;amp; res.data amp;amp; res.data.Result amp;amp; res.data.Result.map((product) => (

Или дополнительная цепочка:

 {isSuccess amp;amp; res?.data?.Result?.map((product) => (

Ответ №2:

В axios вы можете настроить ответ, используя res.data , возможно, это то, что вы упускаете.

Метки: