无法读取未定义的属性(读取“概念”)

Question

解决方案:尽管加载已经完成，但查询中的“数据”没有及时到达以检查Autocomplete组件的options属性。自动完成组件的最后代码：

<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中提取一个概念名称列表。我曾经让它工作过一段时间，但有一次我开始重新抓取，有些地方出了问题，现在不管我做什么，我都会出错。错误发生在下面的react组件中。

错误信息：

<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和阿波罗吊钩：

    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表单中。如果我为上面的data.concepts输入任何有效的对象，这里的console.log将准确地输出数组。提交函数的代码：

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

Answer 1

也许你的data还没到..。尝试将组件封装在三元操作符上，如：{ data ? <Autocomplete .../> : <p>Test></p>}

也许你的data在那里，但概念不是.因此，尝试在访问data.something时使用三元操作符。