开发者问题收集

React Js-未捕获的 TypeError：无法读取未定义的属性

2022-04-13
350
javascript

我在 reactJS 中有一个数据网格，我需要用合并来自三个表的数据来填充它。 第一个包含索引，其他两个是要显示的元素。 下面是填充网格线的代码 

const datiRighe = vocibilancio.map(voci => {
    const lista = listaattivita.find(elemento => elemento.id_lista_attivita === 
    voci.id_gruppo_att)
    const listasub = listasubattivita.find(elementosub => 
    elementosub.id_lista_sub_group === voci.id_sub_group_att)
    console.log("lista:", lista);
    console.log("listasub:", listasub);
    console.log("voci: ", voci);
    return {
        id: voci.id_voce_bilancio,
        idGruppoAtt: lista.denominazione,
        idSubGroupAtt: listasub.denominazione_sub,
        descrizioneVoceBilancio: voci.descrizione_voce_bilancio,
        totaleVoceBilancio: voci.totale_voce_bilancio,
        createdAt: voci.createdAt,
        updatedAt: voci.updatedAt,
    };
}, []);

在三个 console.log 中我得到了我期望的数据，但由于某种原因 lista.denominazione 和 listasub.denominazione_sub 无法访问。

这是 lista 的 console.log ，例如： 

{
    "id_lista_attivita": 1,
    "denominazione": "Uscite da attività di interesse generale",
    "tipo": 0,
    "createdAt": "2022-04-12",
    "updatedAt": "2022-04-12"
}

这是我收到的错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'denominazione')

我不明白我错在哪里。我请求你的帮助，谢谢！

2个回答

这些值 未定义 ： 

const lista = listaattivita.find(elemento =>
  elemento.id_lista_attivita === voci.id_gruppo_att);
const listasub = listasubattivita.find(elementosub => 
  elementosub.id_lista_sub_group === voci.id_sub_group_att);

当 未找到匹配值 时，就会发生这种情况。因此，问题变成了，当这些值 未定义 时，您想 处理 什么情况？

例如，您可以在返回结果时使用 nullish 检查： 

return {
    id: voci.id_voce_bilancio,
    idGruppoAtt: lista?.denominazione, // <--- here
    idSubGroupAtt: listasub?.denominazione_sub, // <--- and here
    descrizioneVoceBilancio: voci.descrizione_voce_bilancio,
    totaleVoceBilancio: voci.totale_voce_bilancio,
    createdAt: voci.createdAt,
    updatedAt: voci.updatedAt,
};

这将导致属性 idGruppoAtt 和 idSubGroupAtt 在返回的结果中为 null 。这可能要求您在代码中的其他地方处理 null 值。

或者您可能想要返回一些默认值，或者抛出错误或其他内容。这取决于您。关键是，如果未找到该值， .find() 可能 返回 undefined ，因此您只需处理这种情况即可。

David
2022-04-13

我解决了。对我来说，问题在于我在 ReactJs 中从数据库执行 GET 的顺序。 首先是单个列表，然后是所有其余数据。

像这样： 

const [vocibilancio, setVocebilancio] = useState([])
useEffect(() => {
    getListaAttivita() // FETCH list one
    getListaSubAttivita() //FETCH list two
    getVociBilancio() // FETCH rest of data
}, [])
Claudio M
2022-04-13