javascript - 使用 If 条件不返回函数中的值

Question

我有一个函数，如果不满足特定条件，我不想渲染该函数。

runinrender(){
          let data = this.props.loadedPolls;
         return  data.map((element,i) => {
            return (<div key={i} className='elementPoll'>
                   <ul>
                      <li>Complaint: <p> {element.question}</p></li>
                      <li>Author: <p>{element.createdBy}</p> </li>
                      
                      <li><ModalComplaint useris={this.state.useris} orderMe={i} updatedParentAndDB={this.updatedParentAndDB} elementname={element.question} elementId={element._id} elementoptions={element.options} elementvotes={element.options.votes}/></li>
                   </ul>
                   
            </div>)
           });
            
     }

本质上，我想添加

if the element.question.charAt(0) == 'K' only then return values of complaint, ModalComplaint and author, else return nothing

我尝试在多个地方添加 if 语句；然而，似乎没有一个起作用。如有任何帮助，我们将不胜感激。

Answer 1

您可以在映射之前使用filter来缩小数组范围。

Array.prototype.filter

runinrender(){
    let data = this.props.loadedPolls;
    return data.filter(element => element.question.charAt(0) === 'K').map((element,i) => {
        return (<div key={i} className='elementPoll'>
            <ul>
                <li>Complaint: <p> {element.question}</p></li>
                <li>Author: <p>{element.createdBy}</p> </li>

                <li><ModalComplaint useris={this.state.useris} orderMe={i} updatedParentAndDB={this.updatedParentAndDB} elementname={element.question} elementId={element._id} elementoptions={element.options} elementvotes={element.options.votes}/></li>
            </ul>

        </div>)
    });

}