Question

我有一个带有嵌套项的View，实现了显示接收到的props数组的类似列表的块，我想从其所有子项的高度之和中获取该块的高度。所以我的组件看起来像这样：

class MultiColumnBox extends Component {
  state = {
    calculatedMaxHeight: null,
  };

  measureBlock = () => {
    let totalHeight = 0;

    //this.props.data is array
    this.props.data.forEach((item, index) => {
      this['checkbox_${index}'].measure((x , y, width, height) => {
        console.log(height)
        totalHeight += height;
      })
      if (index === (this.props.data.length - 1)) {
        this.setState({
          calculatedMaxHeight: totalHeight
        })
      }
    })
  };

  render() {
    return (
      <View
        onLayout={() => this.measureBlock()}
      >
        {this.props.data.map((item, index) => (
          <View ref={node => this[`checkbox_${index}`] = node}>
            // some content....
          </View>
        )}
      </View>
    )
  }
}

但是，如果有5个高度为40dp的块，它将控制台记录40次五次并将state.calculatedMaxHeight设置为0。但是，如果我将if (index === (this.props.data.length - 1))条件移动到测量函数中，它将正常工作，并且将state.calculatedMaxHeight设置为200。为什么这样工作？不管嵌套在度量函数内部，我都使用相同的index变量并增加相同的totalHeight变量，该变量在循环外定义一次。

Answer 1

setState强制组件重新渲染...在渲染中调用setState（这是您正在做的事情）不是一种好习惯，因为它将导致无限的渲染循环（我相信这是您遇到的问题）碰到）

我会说将计算结果从状态中拉出来。将其放在此级别上并使用，但您要从那里进行计划。

Answer 2

我认为问题在于setState函数是在为第一个节点调用的措施内部的回调函数之前调用的。

console.log（height）将打印40次，但5次，但是在第一次打印高度值之前，计算出的MaxHeightt设置为0。

量度内局部变量值

2 个答案: