Question

我在JSX中有一个return语句。我需要删除数组的第一个元素，并返回缩小后的数组，然后将其映射。但是该应用程序在减少数组的行上崩溃。

我检查了-这是一个数组。所以我想这是关于我不正确地编写JSX的原因。拜托，你能帮我吗？

return (
    <div className="popup__toggle">
    {let newArr = event.slice(1)}                                                                                   
    {console.log(newArr)}                                                              
    {newArr.map((item, index) => {                                                                                                                                                                                                       
        return(                                                                                                         
            <div>{item.name}</div>                                                                                                      
        )
    )}
</div>

我需要删除数组的第一个索引并映射它。

Answer 1

注意1：

您将JSX处理为原始JS问题。您需要使用功能性解决方案。因此，无需使用let定义变量，您可以直接对变量进行切片，然后使用结果。

所以您的代码如下：

return (
    <div className="popup__toggle">                                                       
    {event.slice(1).map(item => {
        return(                                                                                                         
            <div>{item.name}</div>                                                                                                      
        )
    })}

</div>
)

注意2：

您没有正确合上支架。我的意思是地图项中的那个。您尚未关闭它。与其相反，我建议返回不包含brace和return的结果。如下所示：

{event.slice(1).map(item => item)}

这是它的缩写。因此，您可能像下面这样：

{event.slice(1).map(item => {
    return <div>{item.name}</div>
})}

或

{event.slice(1).map(item => <div>{item.name}</div>)}

Answer 2

尝试一下：

return (
      <div className="popup__toggle">
        {event.slice(1).map(item => <div key={item.name}>{item.name}</div>)}                                                                                                                                                                                   
      </div>
     )

Answer 3

您几乎完全正确，但是与其将newArr变量完全放在您提到的JSX内，而是在返回函数之外进行了操作：

所以我想这是因为我不正确地编写JSX。

这样做

render(){
  let newArr = event ? event.slice(1) : []; //the new place for the new array. also added a check [event &&] to check if the array is there or not. if its not there it will return an empty array to prevent rendering issues due to newArr.map().
  return (
    <div className="popup__toggle">
      {
        newArr.map((item, index) => <div key={`item.name-#${index + 1}`}>{item.name}</div>)
      }
    </div>
  )
}

如何正确编写-html中的js in return语句

3 个答案: