React Js - 未捕獲的類型錯誤：無法讀取未定義的屬性

Question

我在 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"
}

這是我收到的錯誤：

未捕獲的 TypeError：無法讀取未定義的屬性（讀取“denominazione”）

我不明白我哪里錯了。 求各位幫忙，謝謝！

Answer 1

這些值是undefined的：

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);

當找不到匹配值時會發生這種情況。 所以問題就變成了，你想如何處理這些undefined的情況？

例如，您可以在返回結果時使用無效檢查：

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 ，因此您只需要處理這種情況。

Answer 2

我解決了。 對我來說，問題是我從 ReactJs 中的數據庫執行 GET 的順序。首先是個人列表，然后是所有 rest 的數據。

像這樣：

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