在循环内发出时,不会为正确的项调用onlayout

我在循环中呈现项目,我需要得到每个项目的y位置,以便使用 scrollTo() 在事件发生后滚动到该位置。
问题是看起来 onLayout 没有正确调用,所以我得到了错误的项目位置。
示例项目:

A,B,C,D

但我有时会得到A的存储位置,有时是C的存储位置。
如何同步?

this.props.list.map((item, index) => {
   return (
      <TouchableOpacity
        onLayout={(event) => {
          let {x, y, width, height} = event.nativeEvent.layout;
....

更新

这是完整的代码。所以你看我设置了第一个国家指数 在布局上 . 所以当我按下 乙 它应该滚动到 巴哈马群岛 但有时它会滚动到 巴哈马群岛 有时为了 巴巴多斯 有时为了 不丹 …

const countries = ["Afghanistan", "Albania", "Algeria", "American Samoa", "Andorra", "Angola", "Anguilla", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan"];

export default class App extends Component {

  constructor(props, context) {
    super(props, context);

    this.state = {
      currentLetter: "A",
    };

    this.sections = {}
  }

onLetter(letter) {
    this.setState({currentLetter: letter});
    if (this.sections[letter]) {
      this.scrollView.scrollTo({ y: this.sections[letter] });
    }
  }

<ScrollView ref={ref => this.scrollView = ref}>
          {
            countries.map((item) => {
              return (
                <View onLayout={(event) => {
                  var {x, y, width, height} = event.nativeEvent.layout;
                    if (!this.sections[item[0]]) {
                      this.sections[item[0]] = y;
                    }
                  }}
                  style={{backgroundColor: "#f0aabb", padding: 10, margin: 5}}>
                  <Text>{item}</Text>
                </View>
              )
            })
          }
        </ScrollView>