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) 조건에 따라 검색 결과를 반환하고 플래그 값을 0으로 설정하면 플래그 값을 0으로 유지하고 0으로 초기화 한 다음 메시지 만 반환하려고합니다. 그러나 플래그 조건은 if 루프의 완료 후에 점검되어야합니다.

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

도와 주 었는지 알려주십시오. 지금까지 내 이해가 당신의 문제를 해결해야합니다