React Native动态创建组件传参异常：onPress参数始终一致

你遇到的是闭包作用域陷阱：循环里的itemName是同一个变量引用，当点击触发onPress时，箭头函数才会读取itemName的最终值（也就是循环结束时的最后一个值），所以所有按钮都传同一个参数。下面是几种解决方法：

方法一：使用bind绑定参数 #

直接用bind把当前循环的itemName绑定到onItemClick的参数中，bind会立即捕获当前的itemName值：

<TouchableOpacity
  key={j}
  onPress={onItemClick.bind(this, itemName)}
  style={{height: '100%', display: 'flex', flexDirection:'row'}}
>

方法二：用立即执行函数创建独立作用域 #

通过立即执行函数把当前itemName封装到独立作用域，确保每个按钮拿到的是当前循环的变量值：

<TouchableOpacity
  key={j}
  onPress={(function(name) {
    return () => onItemClick(name);
  })(itemName)}
  style={{height: '100%', display: 'flex', flexDirection:'row'}}
>

方法三：推荐用map代替for循环（从根源避免问题） #

for循环容易踩闭包坑，换成map遍历的话，每一次迭代都是独立的函数作用域，天然规避这个问题，代码也更简洁：

// 先获取菜单的所有项（键+值）
const menuItems = Object.entries(menu[diningHall][mealTime][sectionName]);

// 过滤符合条件的项后生成组件数组
const arrOfItems = menuItems
  .filter(([itemName, itemData]) => {
    // 同时判断过敏规则和搜索匹配
    const isAllergyMatch = processAllergyArr(itemData.itemAllergyArr, exclusionArr, inclusionArr);
    const isSearchMatch = itemName.toLowerCase().includes(search.toLowerCase());
    return isAllergyMatch && isSearchMatch;
  })
  .map(([itemName, _], index) => (
    <View key={index} style={{borderWidth: 1, height: 40}}>
      <TouchableOpacity
        key={index}
        onPress={() => onItemClick(itemName)}
        style={{height: '100%', display: 'flex', flexDirection:'row'}}
      >
        {/* 补充TouchableOpacity内部的渲染内容 */}
      </TouchableOpacity>
    </View>
  ));

内容的提问来源于stack exchange，提问作者Pranav