Reactjs &引用；x、 [PropertyName]不是一个函数；在渲染贴图（）中？

我在React组件中的一组相关tr之后添加一个间隔tr。我通过map（）函数渲染行。我已将一个属性添加到集合中名为IsLastItem的最后一项中。我试图通过在map（）的末尾使用一个保护条件来防止map（）函数在集合的最后一项之后写出一个间隔行，如下所示：

              { y && {!y.IsLastItem} (
                <tr>
                  <td colSpan={4} style={{height:25}}></td>
                </tr>
              )}

{ y && !y.IsLastItem &&
  <tr>
    <td colSpan={4} style={{height:25}}></td>
  </tr>
}

{y&&{！y.IsLastItem}(
)}

但是，此实现将引发以下运行时错误：

y、 IsLastItem不是一个函数

---

我已验证集合中的最后一项上是否存在IsLastItem属性。即使最后一项上不存在IsLastItem属性，似乎也不应该有任何运行时错误，因为undefined将简单地求值为false。知道我在这段代码中可能做错了什么吗？

您使用的是用于函数的大括号。这就是为什么这是误导。你需要像这样做：

{ y && y.IsLastItem && (
  <tr>
     <td colSpan={4} style={{height:25}}></td>
   </tr>
)}

{y&&y.IsLastItem&&(
)}

---

希望这对您有用。

您可以这样尝试：

              { y && {!y.IsLastItem} (
                <tr>
                  <td colSpan={4} style={{height:25}}></td>
                </tr>
              )}

{ y && !y.IsLastItem &&
  <tr>
    <td colSpan={4} style={{height:25}}></td>
  </tr>
}

{y&&！y.IsLastItem&&
}

或

{y&&！y.IsLastItem(
)：null}

---

最好的方法是第一种。

如果您已经实现了IsLastItem，那么您需要

{ y && !y.IsLastItem (
  <tr>
    <td colSpan={4} style={{height:25}}></td>
  </tr>
)}

{y&&！y.IsLastItem(
)}

否则可能

items.map(item, index) => {

{ y && index >= items.length (
  <tr>
    <td colSpan={4} style={{height:25}}></td>
  </tr>
)}

items.map（项目，索引）=>{
{y&&index>=items.length(
)}

您的错误在您的条件中。您使用大括号包围了您的条件：

{！y.IsLastItem}

，这不是条件语句的正确语法，导致它尝试将块作为函数在内部执行。请删除大括号，并在要返回的代码块之前的条件语句后面添加另一个

&

因此它应该是

y&&y.IsLastItem&&（如果它是最后一项，则返回任何JSX）

要仅在项目数组中的最后一个项目后添加分隔符，您的

.map

语句可能如下所示：

items.map(y => {
  return (
    <>

      ... # whatever your standard row component for y is

      {y && y.IsLastItem && (
        <tr>
          <td colSpan={4} style={{height:25}}></td>
        </tr>
      )}
    </>
  )
})

items.map（y=>{
返回(
…#无论y的标准行组件是什么
{y&&y.IsLastItem&&(
)}
)
})