Невозможно прочитать свойства undefined (чтение «понятий»)

Решение: «данные» из запроса Apollo не поступали вовремя для проверки свойства options компонента Autocomplete, хотя загрузка была завершена. Мой окончательный код для компонента автозаполнения:

<Autocomplete
                    multiple
                    disabled = {loadingConcepts}
                    value = {narrowerConceptsV || null}
                    onChange = {(event, newNarrowerConcepts) => {
                      setNarrowerConcepts(newNarrowerConcepts);
                    }}
the solution >>>>   options = {!loadingConcepts && data ? data.concepts : []}
                    getOptionLabel = {(option) => option.name}
                    renderInput = {(params) => (
                      <MDInput {...params} variant = "outlined" label = "Narrower Concepts" />
                    )}
                  />

Исходное сообщение:

Я пытаюсь получить список названий концепций из моего neo4j auraDb. У меня это работало в какой-то момент, но однажды я начал работать над повторной загрузкой, что-то пошло не так, и теперь я получаю сообщение об ошибке, независимо от того, что я делаю. Ошибка возникает в компоненте реакции ниже.

Сообщения об ошибках:

<index.js:165 Uncaught TypeError: Cannot read properties of undefined (reading 'concepts')>
<react_devtools_backend.js:4026 The above error occurred in the AddConcept component:>
<index.js:165 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'concepts')>

Рассматриваемый код (все в одном файле).

Хук gql и apollo:

    import { gql, useMutation, useQuery } from "@apollo/client";
    
    const GET_CONCEPTS = gql`
        query GetConcepts {
          concepts {
            uid
            name
          }
        }
      `;

const { loadingConcepts, errorConcepts, data, refetch } = useQuery(GET_CONCEPTS, {
    fetchPolicy: "network-only",
  });

Компонент реакции. Ошибка вызвана здесь "data.concepts". :

                 <Autocomplete
                    multiple
                    disabled = {loadingConcepts}
                    value = {broaderConceptsV || null}
                    onChange = {(event, newBroaderConcepts) => {
                      setBroaderConcepts(newBroaderConcepts);
                    }}
                    options = {loadingConcepts ? [] : data.concepts}
                    getOptionLabel = {(option) => option.name}
                    renderInput = {(params) => (
                      <MDInput {...params} variant = "outlined" label = "Broader Concepts" />
                    )}
                 />

Этот компонент автозаполнения находится в форме MUI с функцией отправки. Здесь console.info точно выводит массив, если я добавлю любой допустимый объект для data.concepts выше. Код функции отправки:

const handleSubmit = async (e) => {
e.preventDefault();
createConcepts({
  variables: {
    uid: uuidv4(),
    name: nameRef.current.value,
    block: blockV,
    addedBy: user.uid,
  },
});
console.info(data.concepts);
refetch(data); };

Попробуйте добавить отметку «Необязательная цепочка»: data?.concepts

Alon Barenboim 07.10.2022 21:19

Это что-то сделало. Ошибка изменена на: Uncaught TypeError: невозможно прочитать свойства неопределенного (чтение «длина»)

rvhorton 07.10.2022 21:22

Сделайте то же самое перед length, где бы он ни находился внутри вашего компонента :)

Alon Barenboim 07.10.2022 21:23

Подробнее об этом можно прочитать здесь: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Alon Barenboim 07.10.2022 21:24

Хорошо. Я предполагаю, что ошибка .length возникает из-за сопоставления getOptionLabel чуть ниже строки «data.concepts». Но я думаю, что мое замешательство больше связано с тем, почему data.concepts не определен, когда loadingConcepts имеет значение false (data.concepts уже должны быть загружены)?

rvhorton 07.10.2022 21:36
const { loadingConcepts, errorConcepts, data, refetch } = useQuery(…) должно быть const { loading, error, data, refetch } = useQuery(…)
Michel Floyd 08.10.2022 00:46

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

rvhorton 09.10.2022 22:45
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
7
308
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Возможно, вашего data еще нет... попробуйте обернуть свой компонент тернарным оператором, например: { data ? <Autocomplete .../> : <p>Test></p>}

Возможно, ваш data есть, но понятий нет... поэтому попробуйте использовать тернарный оператор, когда пытаетесь получить доступ к data.something

Спасибо! Обертка его тернарным оператором сработала. Я собираюсь продолжить играть с ним, чтобы увидеть, смогу ли он работать без полной упаковки компонентов. Если я получу это, я опубликую свое окончательное решение в редактировании.

rvhorton 07.10.2022 21:52

Применение той же троичной логики непосредственно к компоненту параметров сработало. Еще раз спасибо.

rvhorton 07.10.2022 21:54

Я счастлив, что работает!!! Хороших выходных бро

agnezi.io 07.10.2022 21:56

Другие вопросы по теме