即使使用默认值，TypeError 也无法读取未定义的属性

Question

当我从我的待办事项列表应用程序中删除列表时，我正在尝试使用默认值，这样每当它尝试获取当前列表信息时，它都会在瞬间使用默认值，直到发布请求刷新可用列表。我已经尝试了所有可能的设置默认值的方法，但是即使我在执行 console.log 语句时，我仍然会收到 TypeError ......这绝对没有意义，因为如果我将“console.log（undefined）”放在它上面，这个语句很好，显然不会导致任何错误，但是下一行会有console.log(myUndefinedStatement)，它会导致这个错误。 这是我的代码。 cmets 是默认值的不同选项，我都尝试过但没有一个有效。其中一些 undefined 是一个字符串，但我两种方式都尝试过，只是因为我想不出其他任何东西。此外，对于其中一些人来说，默认值是一个现实的东西，而其他时候它是“hi”，因为我不确定我的其他值是否也可能未定义，所以我尝试了 100% 未定义的东西。

function getCurrentListTitle() {
        // let title = (availableLists[clickedListIndex].title !== "undefined" ?availableLists[clickedListIndex].title : "Hi")
        // return title
        console.log(undefined)
        console.log(availableLists[clickedListIndex].title)
        if (Object.is(availableLists[clickedListIndex].title, undefined)) {
            console.log(availableLists[0].title)
            return availableLists[0].title
        } else {
            console.log(availableLists[clickedListIndex].title)
            return availableLists[clickedListIndex].title
        }
        // return Object.is(availableLists[clickedListIndex].title, undefined) ? console.log("was undefined") : console.log("wasn't undefined");
    }    // ? availableLists[0].title : availableLists[clickedListIndex].title;

这里还有一些代码可能有助于理解我的应用程序

const [lists, setLists] = useState([])


    function deleteList (clickedEl) {
        console.log(lists)
        const delList = {
            name: "please delete",
            listId: clickedEl.id
        }
        if (clickedEl.id) {
            Axios.post("http://localhost:4000/todos/delete", delList)
            .then( () => setLists(delList));
        }
        console.log(lists)
    }

const [availableLists, setAvailableLists] = useState([{title: "", items: ["", "", ""]}]);
    
    useLayoutEffect(() => {
        
        let isMounted = true;
        Axios.get("http://localhost:4000/todos/").then(response => {
          if (isMounted) setAvailableLists(response.data);
        })
        return () => { isMounted = false };
      }, [lists, items]);

更新： 我被要求显示我的函数在哪里被调用或传递，所以这是我的返回语句。函数调用在列表元素中传递。您可能会注意到还有其他 getCurrentList 函数，但我只在函数中包含了一个，因为它们基本上都做同样的事情，只是一个用于标题，一个用于 id，等等。

return(
<div>
    <div className="container">
        <div className="row">
        <Menu 
        onAdd={addList}
        onDelete={deleteList}
        onRename={renameList}
        onChange={changeCurrentList}
        availableLists= {availableLists}
        clickedListIndex= {clickedListIndex}
        />
        <List 
        title={getCurrentListTitle()}
        items={getCurrentListItems()}
        onItemAdd={addItem}
        onItemDelete={deleteItem}
        listId={getCurrentListId()}
        toggleDone={toggleDone}
        />
     </div>
    </div>
</div>
    )

Answer 1

function getCurrentListTitle() {
    
    if ( availableLists[clickedListIndex] ){
        console.log(availableLists[clickedListIndex].title)
        return availableLists[clickedListIndex].title
    } else if ( availableLists[0] ){
        console.log(availableLists[0].title)
        return availableLists[0].title
    };
    // EDIT after OP's comment
    // throw new Error( "No list was found" );
    console.log("No list found");
    return "No list found";
};

或许

function getCurrentListTitle() {
    let title = availableLists[clickedListIndex] ? availableLists[clickedListIndex].title
                : availabileLists[0] ? availableLists[0].title
                // EDIT after OP's comment
                // : null ;
                : "No list found" ;
    console.log( title );
    return title;
};