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

大家好，我想过滤掉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>
    ));

const data=this.state.arr.map（（r，index）=>(
{index}
{r.formName}
{this.state.numosub}
提交页面链接
提交页面链接
));

我尝试在渲染之前添加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
);

const data=this.state.arr.map（（r，index）=>(
如果（r._id）{
{index}
{r.formName}
{this.state.numosub}
提交页面链接
提交页面链接
)}
否则返回空值
);

但是它不会编译，有人能告诉我怎么做才是正确的方法吗？

---

为了清楚起见，我只想检查r.\u id是否有内容，如果没有，我就不想显示。

您的

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
})

const data=this.state.arr.map（（r，index）=>{
如果（r._id）{
返回(
{index}
{r.formName}
{this.state.numosub}
提交页面链接
提交页面链接
)
}
否则返回空值
})

---

注意这将返回一个包含null的数组。如果需要过滤，则在

映射之前进行链

可以使用三元运算符并在render using.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}
))})
}

render（）{
const{arr，numosub}=this.state；
返回(
{arr&&arr.map（（r，index）=>(
{r.\u id(
{index}
{r.formName}
{numosub}
提交页面链接
提交页面链接
)：null}
))})
}

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

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

---

此设置不需要if语句。

此代码无法编译，我甚至尝试复制，但出现了相同的错误。@AlexAlex我最后缺少一个结束语

）

。编辑的{方括号不是必需的。映射即使与（.return）一起工作，当我们使用{方括号时也是必需的，而当我们使用（方括号）时则不需要return