Object.keys - 期望一个赋值或函数调用，而是看到一个表达式 no-unused-expressions

Posted 2023-02-21

【中文标题】Object.keys - 期望一个赋值或函数调用，而是看到一个表达式 no-unused-expressions

【英文标题】：Object.keys - Expected an assignment or function call and instead saw an expression no-unused-expressions

【发布时间】：2019-11-23 13:12:10

【问题描述】：

在 ReactJS 中使用多个 javascript 方法创建一个 html 表。 Object.keys 用于从对象中提取数据。在渲染 thead th's 和 tbody tr 和 td's 而没有收到消息时遇到问题，“期望一个赋值或函数调用，而是看到一个表达式 no-unused-expressions”。

import React from 'react';

const CreateTable = ( results ) => 

    //headers should be based on keys
    const CreateHeaders = () => 
        return (
            <thead>
                <tr>
                    Object.keys(results.header).forEach(function(column)
                        // console.log(column);
                        <td>
                            column
                        </td>
                    )
                </tr>
            </thead>
        )
    

    const CreateBody = ( ) => 
        return (
            <tbody>
                Object.keys(results.data).forEach(function(tr)
                    // console.log(results.data[tr])
                   <tr>
                       CreateRows(results.data[tr])
                  </tr> 
                )
            </tbody>
        )
    

    const CreateRows = (tr) => 
        return(
        Object.keys(tr).forEach(function(td)
            console.log(tr[td]);
            <td>tr[td]</td>
        ));
    

    if( results.data !== null && results.data !== undefined)
        console.log(<table>CreateHeaders()CreateBody()</table>);
        return <table>CreateHeaders()CreateBody()</table>
    
    else 
        return (null);
    




export  CreateTable 

我希望呈现一个表格，但我收到一条消息说明，

第 12 行：应为赋值或函数调用，但看到的是表达式 no-unused-expressions 第 26 行：期望一个赋值或函数调用，而是看到一个表达式 no-unused-expressions 第 38 行：期望一个赋值或函数调用，但看到一个表达式 no-unused-expressions

我可以在 object.keys 函数中设置一个返回值，但是当我什么都不做时，只会渲染表格的骨架。浏览器

<table><thead></thead><tbody></tbody></table>

上面代码底部的 if 语句的 Console.log 输出

$$typeof: Symbol(react.element), type: "table", key: null, ref: null, props: …, …
$$typeof: Symbol(react.element)
key: null
props:
children: Array(2)
0:
$$typeof: Symbol(react.element)
key: null
props:
children:
$$typeof: Symbol(react.element)
key: null
props: children: undefined
ref: null
type: "tr"
_owner: FiberNode tag: 0, key: null, elementType: ƒ, type: ƒ, stateNode: null, …
_store: validated: true
_self: null
_source: fileName: "...\src\components\table.js", lineNumber: 10
__proto__: Object
__proto__: Object
ref: null
type: "thead"
_owner: FiberNode tag: 0, key: null, elementType: ƒ, type: ƒ, stateNode: null, …
_store: validated: true
_self: null
_source: fileName: "...\src\components\table.js", lineNumber: 9
__proto__: Object
1:
$$typeof: Symbol(react.element)
key: null
props: children: undefined
ref: null
type: "tbody"
_owner: FiberNode tag: 0, key: null, elementType: ƒ, type: ƒ, stateNode: null, …
_store: validated: true
_self: null
_source: fileName: "...\src\components\table.js", lineNumber: 24
__proto__: Object
length: 2
__proto__: Array(0)
__proto__: Object
ref: null
type: "table"

【问题讨论】：

能否提供console.log的输出？

forEach 不返回任何内容，请使用 map

1) 你想要map 而不是forEach，因为后者返回未定义。 2) 然后你需要从迭代函数return (<td>...) 实际返回 3) 请记住Object.keys 中的键顺序不能保证。

【参考方案1】：

您正在使用没有返回值的forEach。您正在寻找 map。

<tr>
    Object.keys(results.header).map(column => (
        // console.log(column);
        <td>
            column
        </td>
    ))
</tr>

并从CreateRows返回map结果

const CreateRows = (tr) => 
    return(
    Object.keys(tr).map(td =>
        <td>tr[td]</td>
    ));