箭頭函數中的大括號

Question

有人可以，請解釋以下內容：

我正在聽 Dan Abramov 的講座並做練習。

代碼工作正常，但是，當以下特定 function用大括號**{ }**編寫時，測試失敗。

    case 'toggleTodo' :
        return (
            state.map( (one) => {
                oneTodo( one, action )
            })
        );

相同的代碼在沒有大括號的情況下也能正常工作。

    case 'toggleTodo' :
        return (
            state.map( (one) => 
                oneTodo( one, action )
            )
        );

這是 JsBin 。 請參考第 31 行之后的內容。

Answer 1

這對大括號形成一個塊，其中包含一個語句列表。 您需要顯式使用return語句來使函數返回某些內容。

如果省略大括號，箭頭函數有一個簡潔的主體，它只包含一個表達式，其結果將隱含地成為函數的返回值。

Answer 2

case 'toggleTodo' :
    return (
        state.map( (one) => 
            oneTodo( one, action )
        )
    );

等於：

case 'toggleTodo' :
    return (
        state.map( (one) => {
            return oneTodo( one, action )
        })
    );

見退貨聲明

Answer 3

當箭頭 function 內有多個語句時，使用花括號是一種公平的做法。使用花括號將多個語句作為一個塊，避免在箭頭 function 內出現錯誤。