Question

大家好，我试图过滤map函数的第一次迭代，因为它是未定义的，并且我不想显示它，

代码是这样的：

  const data = this.state.arr.map((r, index) => (
      <tr key={index}>
        <th>{index}</th>
        <th>{r.formName}</th>
        <th>{this.state.numofSub} </th>
        <th>
          <Link to={`/submitPage/${r._id}`}>Submit PageLink</Link>
        </th>
        <th>
          <Link to={`/submissionPage/${r._id}`}>Submission page Link </Link>
        </th>
      </tr>
    ));

我尝试在渲染之前添加if语句，如下所示：

  const data = this.state.arr.map((r, index) => (
  if(r._id){
      <tr key={index}>
        <th>{index}</th>
        <th>{r.formName}</th>
        <th>{this.state.numofSub} </th>
        <th>
          <Link to={`/submitPage/${r._id}`}>Submit PageLink</Link>
        </th>
        <th>
          <Link to={`/submissionPage/${r._id}`}>Submission page Link </Link>
        </th>
      </tr>
    )}
else return NULL
);

但是它无法编译，有人可以告诉我这样做的正确方法吗？明确地说，我只想检查r._id中是否包含某些内容，如果没有，则不要显示它。

Answer 1

您的map函数没有正文（大括号）{}。
并且您在if语句之后忘记了回报。

 const data = this.state.arr.map((r, index) => {
  if(r._id){
    return(
      <tr key={index}>
        <th>{index}</th>
        <th>{r.formName}</th>
        <th>{this.state.numofSub} </th>
        <th>
          <Link to={`/submitPage/${r._id}`}>Submit PageLink</Link>
        </th>
        <th>
          <Link to={`/submissionPage/${r._id}`}>Submission page Link </Link>
        </th>
      </tr>
    )
   }
    else return null
})

注意，这将返回其中包含null的数组。如果您需要过滤，请在map

之前链接filter

Answer 2

您可以使用三元运算符并使用.map在渲染中直接渲染JSX元素

render(){
 const { arr, numofSub } = this.state;
 return(
    {arr && arr.map((r, index) => (
      {r._id ? (
      <tr key={`${r.formName}-${index}`}>
       <th>{index}</th>
       <th>{r.formName}</th>
       <th>{numofSub} </th>
       <th>
        <Link to={`/submitPage/${r._id}`}>Submit PageLink</Link>
      </th>
      <th>
         <Link to={`/submissionPage/${r._id}`}>Submission page Link </Link>
      </th>
    </tr>) : null}
))})
}

Answer 3

我认为Array.prototype.filter（）方法对于解决此类问题非常有效。像这样：

const filteredData = this.state.arr.filter(item => item.id !== undefined)
const data = filteredData.map((r, index) => (
  ...
)

此设置不需要if语句。

如何使用react在map函数中添加if语句

3 个答案: