如何使用reactjs更改变量值以返回渲染？

Question

render() {
    let inputText=this.props.searchData
    console.log(inputText);
    let Inputreg = inputText.toLowerCase()
    console.log(Inputreg)
    console.log(this.state.Product)
    let Product= this.state.Product;
    let flag = 0;
        return(
            <div>
           { this.state.Product.map((obj,index)=> {

                let productNameLow = obj.name.toLowerCase()
                console.log(productNameLow)
                var arr = productNameLow.split(' ');
                console.log(arr)
                console.log(Inputreg)
                let n =(inArray(arr, Inputreg));
                console.log(n)
                if (n > 0) {
                    return (
                            <div className ="Product" key={index}> 
                                <div className="card">
                                    {<Link to ={{pathname: './ProductDescription' , state: { item: obj } }} className="card-img-top"><img src={obj.thumbBig[0]} alt="" /></Link>}  
                                    <div className="card-body">
                                        <h4 className="card-title">{obj.name}</h4>
                                        <p className="card-text-right"></p>
                                        <input type="button" value="Add to Cart" onClick={e=>this.handleClick(obj.name,obj.price,obj.thumbBig[0],index)}/>
                                        <input type="button" value="Add to Favourite" className="fav-button" id={index} onClick={e=>this.props.getFavourite(index)}/>
                                    </div>
                                </div>
                            </div>       
                    )
                    {flag = 1}// flag value is not being set to 1
                }
            })}

                {(() => {
                        if(flag == 1){
                            return (
                                <div>
                                <h2>No such product exist. Try another search</h2>
                                </div>
                            )
                        } 
                    })()} // function is self invoked , although i wanted to invoke this flag condition after my if(n>0) loop is completely iterated. 

        </div>
    )
}

我想根据 if(n>0) 条件返回搜索产品并将标志值设置为 1 ，如果标志值保持为 0 并且我只初始化为 0 ，那么我只想返回消息。但是需要在if循环完成后检查flag条件。

Answer 1

render() {
    let inputText = this.props.searchData;
    let Inputreg = inputText.toLowerCase();
    let Product = this.state.Product;
    let flag = 0;
        return(
           <div>
           { this.state.Product.map((obj,index)=> {

                let productNameLow = obj.name.toLowerCase()
                console.log(productNameLow)
                var arr = productNameLow.split(' ');
                console.log(arr)
                console.log(Inputreg)
                let n =(inArray(arr, Inputreg));
                console.log(n)
                if (n > 0) {
                    return (
                            <div className ="Product" key={index}> 
                                <div className="card">
                                    {<Link to ={{pathname: './ProductDescription' , state: { item: obj } }} className="card-img-top"><img src={obj.thumbBig[0]} alt="" /></Link>}  
                                    <div className="card-body">
                                        <h4 className="card-title">{obj.name}</h4>
                                        <p className="card-text-right"></p> 
                                    </div>
                                </div>
                            </div>       
                    )
                    {flag = 1}
                }
            })}

             {(flag == 0) &&
                     <h2>No such product exist. Try another search</h2>

             } 
             {(flag !== 0) &&
              <h2>Some other message</h2>
             }                       
        </div>
    )
}

如果有帮助，请告诉我。据我了解，这应该可以解决您的问题