变量未定义，何时定义？答案

【问题标题】：Variable not defined, when it is?变量未定义，何时定义？
【发布时间】：2019-06-19 07:10:32
【问题描述】：

所以有点上下文是它从firebase拉一个本地图像链接然后它应该在单击标记时设置为页面上的设置图像，图像值适用于标记但在返回之外的视图上设置不说它是一个未定义的变量是行不通的，控制台日志也显示了正确的值。我删除了所有不相关的代码部分，使其看起来尽可能易于阅读。

export class HomeScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      image: '',
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <MapView>
          {this.state.data.map((obj, index) => {
            return (
              <MapView.Marker
                key={index}
                onPress={() => {
                  this.setState({ image: obj.image });
                  let { value } = 'require(' + obj.image + ')';
                  console.log(value);
                }}>
                <Image source={require(obj.image)} style={styles.pet} />
              </MapView.Marker>
            );
          })}
        </MapView>

        <View style={styles.petinfo}>
          <Image style={styles.locpetimg} source={value} />
        </View>
      </View>
    );
  }
}

export default withNavigation(HomeScreen);

【问题讨论】：

哪个变量应该是undefined？您的代码中的错误来自哪里？
这是什么this.state.data？永远不会看到你声明或分配任何数组
value 变量在尝试设置源图像时返回 undefined，其他一切正常。我删除了不相关的代码，因为它是一个相当大的组件。
不建议对render() 部分的事件使用箭头函数。每次渲染都会创建一个新函数。
您是否尝试在中使用“onPress”设置的“值”？这是不可能的，因为它超出了范围

标签： javascript reactjs react-native expo

【解决方案1】：

您是否尝试在<Image/> 中使用“onPress”设置的“值”？这是不可能的，因为它超出了范围。尝试类似

export class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.value = null;
    this.state = {
      image: '',
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <MapView>
          {this.state.data.map((obj, index) => {
            return (
              <MapView.Marker
                key={index}
                onPress={() => {
                  this.setState({ image: obj.image });
                  this.value = 'require(' + obj.image + ')';
                  console.log(value);
                }}>
                <Image source={require(obj.image)} style={styles.pet} />
              </MapView.Marker>
            );
          })}
        </MapView>

        <View style={styles.petinfo}>
          <Image style={styles.locpetimg} source={this.value} />
        </View>
      </View>
    );
  }
}

export default withNavigation(HomeScreen);

这里我将值存储在类的成员变量中，然后使用它。

【讨论】：

【解决方案2】：

export class HomeScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      image: '',
      data:[]
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <MapView>
          {this.state.data.map((obj, index) => {
            return (
              <MapView.Marker
                key={index}
                onPress={() => {
                  this.setState({ image: obj.image });
                  let { value } = 'require(' + obj.image + ')';
                  console.log(value);
                }}>
                <Image source={require(obj.image)} style={styles.pet} />
              </MapView.Marker>
            );
          })}
        </MapView>

        <View style={styles.petinfo}>
          <Image style={styles.locpetimg} source={value} />
        </View>
      </View>
    );
  }
}

export default withNavigation(HomeScreen);

【讨论】：