Question

我有这个组件

我绘制它的道具并渲染一些值

我有一个方法可以返回值的平均值

我的想法是..在map方法的render()函数期间..检查每次迭代..如果值大于平均值，则给它一个红色，如果少于给它绿色......否则给它继承的颜色。

calculateAverageConsumption = () => {
      if (!this.props.fuelD) return 0;
      let sum = 0 , avr;
      for( let i = 0; i < this.props.fuelD.length; i++ ){
        sum += parseInt(this.props.fuelD[i].value);
      }
      avr = ( sum / this.props.fuelD.length ).toFixed(2);
      return avr;
  }
  colorOfvalues = (dataValue) => {
    let arg = this.calculateAverageConsumption();
    if(dataValue > arg){
      return "red";
    }else if ( dataValue < arg){
      return "green"
    }else return "inherit"
  }
  render() {
    return (
      <div>
        <p>Average: {this.calculateAverageConsumption()}</p>
        { this.props.fuelD.map((data , i )=>{
            return (
              <p key={i} style={{color: this.colorOfvalues(data.value) }}>date:{data.date}
              value:{data.value}</p>
            )
          }) }
      </div>
    );
  }

array.map（）中的值检查在反应渲染中不起作用每次我得到的都是红色或全部变成绿色......基于

( "<" and ">" sings ) ......我做错了吗？

Answer 1

我在这行代码时发现了我的错误

style={{color: this.colorOfvalues(data.value) }}

data.value是从数据库中提取的字符串...在color方法中我将字符串与整数进行比较

style={{color: this.colorOfvalues(parseInt(data.value)) }}

这是有效的

array.map（）中的值检查不能正常响应render（）

1 个答案: