onLayout 在循环内被起诉时不会为正确的项目调用

Question

我在循环中渲染项目，我需要让每个项目获得 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;
....

更新

这是完整的代码。所以你看我设置了我在onLayout中找到的第一个国家索引。因此，当我按 B 时，它应该滚动到巴哈马的位置，但它有时会滚动到巴哈马，有时滚动到巴巴多斯，有时滚动到不丹......

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>

Answer 1

我认为onLayout不会按顺序进行。所以不确定巴哈马是否会先走。

我认为您应该创建一个用于映射字母和开始/指向项的功能，例如："A"="阿富汗"，"B"="巴哈马">

你可以硬编码它(不推荐，只是解释一下这个想法(

dataSource = { 'Afghanistan': 'A', 'Bahamas': 'B'}
// implement this func base on your rules for title and letter
getLetterFromTitle(title) {
  return dataSource[title];
} 

然后onLayout

const letter = getLetterFromTitle(item);
if (letter && !this.sections[letter]) {
  this.sections[letter] = y;
}