Реагировать на полный стек: Не удается прочитать свойства неопределенного (чтение "карты")

#javascript #reactjs

Вопрос:

Я пытаюсь понять, что я здесь делаю не так, однако я не совсем уверен. Я хочу передать объект с сайта, который является «цветным» в соответствии с базой данных (австралийский).

Затем я хочу отобразить этот массив на внешний интерфейс, чтобы отображать только эти цвета как таковые. Например, в этом массиве есть [«Белый», «Черный», «Красный»] и т. Д.

Изначально у меня есть useEffect функция, как показано ниже:

 useEffect(() =gt; {  const getProduct = async () =gt; {  try {  const res = await publicRequest.get("/products/find/"   id);  setProduct(res.data);  } catch {}  };  getProduct(); }, [id]);

Исходя из этого, я пытаюсь составить карту:

 lt;Filtergt;  lt;FilterTitlegt;Colourlt;/FilterTitlegt;  {product.color.map((c)=gt; (  lt;FilterColour color={c} key={c}/gt;   ))} lt;/Filtergt;

Но я получаю классическую:

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

Я пробовал и цвет, и цвет и т. Д., Но не могу решить? Любые идеи Складываются в стопку!

1. Начальное состояние, вероятно, будет пустым массивом, и вы не сможете выполнить итерацию по цветовому массиву продукта, если продукт не существует. Есть несколько способов решить эту проблему, но я предпочитаю добавить чек перед возвратом. Что-то вроде: if (!product.color) return lt;divgt;No productlt;/divgt; .

Ответ №1:

Перед вызовом setProduct ваше значение по умолчанию должно иметь цвет в качестве свойства и должно быть массивом. Если вы столкнулись с этим после вызова setProduct, просто проверьте res.data, чтобы узнать, получаете ли вы данные в ожидаемом формате.

Ответ №2:

Поскольку данные, которые вы пытаетесь отобразить, являются результатом асинхронной функции, product все еще не заполнены во время начальной визуализации, они заполняются только после.

Что мы обычно делаем в React, чтобы обойти это, так это добавляем условные операторы.

Это должно сработать —

 lt;Filtergt;  lt;FilterTitlegt;Colourlt;/FilterTitlegt;  {product.color amp;amp; product.color.map((c)=gt; (  lt;FilterColour color={c} key={c}/gt;   ))} lt;/Filtergt;

1. Аааа @tomleb3, невероятно! Это работает, большое вам спасибо. Таким образом, логика здесь в основном такова: если product.color существует, то сопоставьте product.color по всему? Даже не подумал об этом!

2. Всегда пожалуйста. И да, это в основном означает, что во время первоначального рендеринга product.color не существует, потому что данные publicRequest.get еще не возвращены, и поэтому мы используем ту логику, о которой вы упомянули.

Ответ №3:

Вам необходимо убедиться, что атрибут, к которому вы хотите получить доступ, сохраняет ту же структуру данных. Если нет, вам нужно проверить, является ли он неопределенным или нет.

Решение 1:

Сохраняйте ту же структуру данных. Крючок useState должен быть инициализирован как:

 const [product, setProduct] = useState({color: []}) // or populate other attributes in the initial state.

Решение 2:
Проверьте, существуют ли данные:

 {product.color amp;amp; product.color.map((c)=gt; (  lt;FilterColour color={c} key={c}/gt;  ))}