預期一個賦值或 function 調用，而是看到一個表達式錯誤

Question

我寫的一些代碼有一個小問題，我不斷收到錯誤：

期望一個賦值或 function 調用，而是看到一個表達式

我已經評論了錯誤發生的地方。 但是不確定是什么問題。 代碼如下：

renderBody() {
    const { bookings } = this.props;
    if (bookings.length > 0) {
        return (
            Object.keys(bookings).map(e => (
                <TableBody>
                    {Object.values(bookings[e]).forEach((value) => {
                        <TableCell>{value}</TableCell>; //<-ERROR??
                    })}
                </TableBody>
            ))
        );
    }
    return null;
}

Answer 1

因為你沒有在forEach內部做任何事情（沒有賦值，沒有計算），所以forEach也不會返回任何東西，使用map返回每個數組條目的 TableCell。

如果你寫一個沒有任何操作的forEach循環， Eslint會拋出一個錯誤。

像這樣寫：

{Object.values(bookings[e]).map(value => (
    <TableCell>{value}</TableCell>
))}

Answer 2

你只是錯過了結束語) ：

 Object.values(bookings[e]).map(value => (
            <TableCell>{value}</TableCell>
  ))} // <--

Answer 3

如果您想在循環內處理一些數據，請嘗試使用普通的 for 循環而不是 map 或 forEach。

如果您要返回 HTML 內容，那么您應該明確地返回它。

Object.keys(bookings).map(e => {
    return (
        <TableBody>
            {Object.values(bookings[e]).forEach((value) => {
                return (
                    <TableCell>{value}</TableCell>
                )
            })}
        </TableBody>
    )
})