为什么我的 JSX 在不应该的情况下呈现 <tr>？

Question

我有一个 table 可以自行填充行和 <td> 标签。它做得很好，如下所示：

table是通过数组映射生成的

{objInnerValues[shopIndex].map((thing, outerIndex) => (
                            
// Ternary operator to stop creating rows from element 0
            (outerIndex === 0) ? console.log("outerIndex WAS 0") : (outerIndex %2 === 0) ? 
            Object.values(thing).map((innerThing, innerIndex) => (
<>
                            
{/* Tooltip popup for item blurb */}
            <HtmlTooltip title={
                 //a tooltip component, from MUI. Gets a string to display
            }
            >
                            
                            
{/* Table rows for each record */}
            <TableRow
                //style definitions, then an id for the row...
                id =  {"rowID-"+thing[0][0]}
            >

            {AR_RowRefs.push("rowID-"+thing[0][0])}

{/* Indidivual td elements to display each item in a row*/}
            <SuperTD NoHoverTD>
                {//Items name}
            </SuperTD>
                            
            <SuperTD NoHoverSmallTxtTD>
                {//category the item belongs to} 
                <Button>
                //a visibility button, part of what I'm trying to work on
                </Button>
            </SuperTD>

            <SuperTD NoHoverSmallTxtTD>
                {
                //Get weight of item from array and format it
                }                    
            </SuperTD>

            <SuperTD NoHoverSmallTxtTD>
                {
                //Get price from array and format it
                }
            </SuperTD>

{/* Checkbox for if item is available */}
            <SuperTD>
                <input type="checkbox" defaultChecked={innerThing[6]}/>
            </SuperTD>

{/* Checkbox for if item is limited */}
            <SuperTD>
                <input type="checkbox" defaultChecked={innerThing[7]}/>
            </SuperTD>

            </TableRow>
        </HtmlTooltip>
    </>

在我的 return 块上方，我有一个数组，我想用它来存储生成的每个 table 行的 ID。我有一个函数（从每个可见性按钮的 onClick 触发）。

我在数组映射内的 return 块中写了这个：

{AR_RowRefs.push("rowID-"+thing[0][0])}

但是，当我保存它并呈现它时，它会创建一个额外的数据列：

我认为额外的 <td> 只有在我放置标签的情况下才会呈现。这只是一个 JSX 片段，所以它创建自己的 <td> 有什么特别的原因吗？我仍然可以让这个片段将 id 推送到数组而不渲染额外的元素吗？

Answer 1

I thought that an extra <td> would only render if I put tags around it. This is just a JSX snippet so is there any particular reason its creating its own <td>?

浏览器正在尝试从您将数字（转换为字符串）作为 tr 的子项的错误中恢复。

Can I still have this snippet push ids to an array without rendering an extra element?

快速而肮脏的方法（我还没有测试过）是更改表达式，使其不计算为数字。

{void AR_RowRefs.push("rowID-"+thing[0][0])}

明智的做法是拆分数据操作逻辑和显示逻辑。

Object.values(thing).map((innerThing, innerIndex) => {

    AR_RowRefs.push("rowID-"+thing[0][0]);

    return <>
        ...
    </>;

};

为什么我的 JSX 在不应该的情况下呈现 <tr>？

Why is my JSX rendering a <tr> when it shouldn't?

javascript

jsx

reactjs