javascript - 在 REACTJS 中的函数的渲染中显示结果

Question

我想渲染文本“结果！” 以及largestLikeResult我的getLargest()函数的名称。

    getLargest() { 
        var largestLikeResult = null
        var largerstLikeNum= 0 
        if(this.props.results!=null){
            //.map goes through every result
            this.props.results.map(i=> {
                console.log(i.name)
                this.state.resultsRef.child(this.replaceAll("."," ",i.name)).once('value',function(snapshot) {
                if(largerstLikeNum<snapshot.val().right)
                {   
                    console.log("new largest in town")
                    largerstLikeNum = snapshot.val().right 
                    largestLikeResult= i.name 
                    console.log(largestLikeResult)
                }
                }) 
            })
            return (
                <div>
                {largestLikeResult}
                </div>
                )


        }
        else {
            return null
        }
    }

    render(){ 
        return (
            <div>
            Results! 
            <h1>{this.getLargest()}</h1>
            </div>  
        ) 
    }  
}
export default DisplayResults

目前，只有结果！显示在页面上，并且名称largestLikeResult显示在控制台中，而不是页面中。我可以添加任何快速更改render()以显示largestLikeResult?

提前致谢！

标签： javascriptreactjs

Answer 1

为了快速更改，我认为如果您从更改map为forEach它会正常工作：

this.props.results.forEach(i => {

但我建议将getLargest()功能重构为类似于以下内容：

getLargest() { 
    let largerstLikeNum = 0; 
    const { results } = this.props;
    const { resultsRef } = this.state;

    // Always return early
    if (!results || !Array.isArray(results)) {
      return null;
    }

    return (
      <div>
        {
          results.map(i => {
              return resultsRef.child(this.replaceAll('.', ' ', i.name)).once('value', snapshot => {
                if (largerstLikeNum < snapshot.val().right) {   
                    console.log('new largest in town');
                    largerstLikeNum = snapshot.val().right ;
                    return (
                      <div>{i.name}</div>
                    );
                }
                return null;
              }) 
          })
        }
      </div>
    );
}