[英]Object.keys - Expected an assignment or function call and instead saw an expression no-unused-expressions
Creating a html table using multiple javascript methods in ReactJS. 在ReactJS中使用多个javascript方法创建html表。 Object.keys is used to pull the data from objects. Object.keys用于从对象中提取数据。 Having an issue with rendering the thead th's and tbody tr and td's without getting message, 'Expected an assignment or function call and instead saw an expression no-unused-expressions'. 在呈现主题和主体tr和td而没有得到消息时出现问题,“预期分配或函数调用,而是看到了表达式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 }
I expect a table to render but instead i receive a message stating, 我希望有一个表可以呈现,但是我收到一条消息,
Line 12: Expected an assignment or function call and instead saw an expression no-unused-expressions Line 26: Expected an assignment or function call and instead saw an expression no-unused-expressions Line 38: Expected an assignment or function call and instead saw an expression no-unused-expressions 第12行:需要一个赋值或函数调用,而看到了一个表达式no-unused-expressions第26行:希望有一个赋值或函数调用,而又看到了一个表达式no-unused-expressions表达式no-unused-expressions
I could set a return inside the object.keys function but when i do nothing is rendered but the skeleton of the table. 我可以在object.keys函数内部设置一个return,但是当我什么都不做时,除了表的骨架外,什么都不呈现。 IE IE
<table><thead></thead><tbody></tbody></table>
Console.log output from if statement towards the bottom of code shown above 从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"
You're using forEach
which has no return value. 您正在使用没有返回值的forEach
。 You're looking for map
instead. 您正在寻找map
。
<tr>
{Object.keys(results.header).map(column => (
// console.log(column);
<td>
{column}
</td>
))}
</tr>
And return the result of map from CreateRows
并从CreateRows
返回地图的结果
const CreateRows = (tr) => {
return(
Object.keys(tr).map(td =>
<td>{tr[td]}</td>
));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.