在地图功能中反应本机导航答案

【问题标题】：React Native Navigation inside Map Function在地图功能中反应本机导航
【发布时间】：2022-01-21 17:55:32
【问题描述】：

我正在尝试使用 React Native 中的 Map 函数从 JSON 数据生成卡片。

我希望能够通过单击此卡片导航到另一个页面。

这是我正在尝试的解决方案：

function display() {
  
  return restaurant.map((item) => {
    return(
      <TouchableHighlight onPress={() => this.props.navigation.navigate('Restaurant')}>
        <View style={styles.card}>
          <View style={styles.cardHeadText}>
            <Text style={styles.title}>
              { item.name }
            </Text>
            <Text>
              { item.type }
            </Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  });
}

class RestaurantCard extends Component {
  render() {
    return (
      
      <View style={styles.container}>
        {display()}
      </View>
      
      
    );
  }
}

但我收到以下错误：

未定义不是一个对象（评估'_this.props.navigation'）

我做错了什么？

【问题讨论】：

在这里进行真正的盲刺，但在function display() 下方输入const that = this 之类的内容，然后将您的onPress 更改为that.props.navi....

标签： javascript react-native

【解决方案1】：

您可以将this 作为参数传递给map 函数，如文档中所述：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

function display() {
  
  return restaurant.map((item) => {
    return(
      <TouchableHighlight onPress={() => this.props.navigation.navigate('Restaurant')}>
        <View style={styles.card}>
          <View style={styles.cardHeadText}>
            <Text style={styles.title}>
              { item.name }
            </Text>
            <Text>
              { item.type }
            </Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  }, this); // over here
}

【讨论】：

【解决方案2】：

你可以试试 :) 我已经将导航作为显示功能中的道具传递，将其破坏并重新用作访问 this.props.navigation 的简短方法。..

提取handler 中的点击逻辑使其易于阅读和控制，您可以更轻松地添加验证和其他内容。

function display(props) {
  const { navigation } = props

  const handlerClick = (item) => {
      /*
         all the content of item (name, and type) will be passed in
         props of the other page component
      */
      navigation.navigate("Restaurant", { ...item})
  }

  return restaurant.map((item) => {
    return(
      <TouchableHighlight onPress={() => handlerClick(item)}>
        <View style={styles.card}>
          <View style={styles.cardHeadText}>
            <Text style={styles.title}>
              { item.name }
            </Text>
            <Text>
              { item.type }
            </Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  });
}

class RestaurantCard extends Component {
  render() {
    return (
      <View style={styles.container}>
        {display(this.props.navigation)}
      </View>
    );
  }
}

【讨论】：