Решение: «данные» из запроса 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); };
Это что-то сделало. Ошибка изменена на: Uncaught TypeError: невозможно прочитать свойства неопределенного (чтение «длина»)
Сделайте то же самое перед length
, где бы он ни находился внутри вашего компонента :)
Подробнее об этом можно прочитать здесь: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Хорошо. Я предполагаю, что ошибка .length возникает из-за сопоставления getOptionLabel чуть ниже строки «data.concepts». Но я думаю, что мое замешательство больше связано с тем, почему data.concepts не определен, когда loadingConcepts имеет значение false (data.concepts уже должны быть загружены)?
const { loadingConcepts, errorConcepts, data, refetch } = useQuery(…)
должно быть const { loading, error, data, refetch } = useQuery(…)
У меня также есть мутация в этом файле, поэтому я изменил загрузку и ошибку для запроса, чтобы избежать повторяющихся имен переменных.
Возможно, вашего data
еще нет... попробуйте обернуть свой компонент тернарным оператором, например: { data ? <Autocomplete .../> : <p>Test></p>}
Возможно, ваш data
есть, но понятий нет... поэтому попробуйте использовать тернарный оператор, когда пытаетесь получить доступ к data.something
Спасибо! Обертка его тернарным оператором сработала. Я собираюсь продолжить играть с ним, чтобы увидеть, смогу ли он работать без полной упаковки компонентов. Если я получу это, я опубликую свое окончательное решение в редактировании.
Применение той же троичной логики непосредственно к компоненту параметров сработало. Еще раз спасибо.
Я счастлив, что работает!!! Хороших выходных бро
Попробуйте добавить отметку «Необязательная цепочка»:
data?.concepts