反应原生地图方法不渲染

问题描述 投票:0回答:1

我正在做一个简单的加密货币应用程序来显示每日价格和变化。当使用0索引渲染具有第一个硬币的信息的视图时,显示数据,但是当使用map方法时,不显示任何内容......这里是视图的代码:

              <View style={styles.container}>
               <ScrollView contenContainerStyle={styles.coinList}>
                {this.state.coinList.map((coin, index) => {
                  alert (coin.symbol + ': ' + coin.price);
                  <CoinInfo
                    key={index}
                    symbol={coin.symbol}
                    name={coin.name}
                    price={coin.price}
                    change={coin.change}
                    active={false}
                    onPress={this.fonPress}
                  />;
                })}
              </ScrollView>
            <View/>

const styles = StyleSheet.create({
  container: {
    flex: 62,
    backgroundColor: '#40137A',
    alignItems: 'center',
    justifyContent: 'center',
  },
  loading: {
    justifyContent: 'center',
  },
  coinList: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
  }
});

我使用警报来查看地图是否正常工作,它提醒我阵列中的8个硬币中的7个......

谢谢你的帮助

javascript arrays reactjs native
1个回答
2
投票

使用Array.map方法时,应返回要添加到结果数组的元素。

您会看到警报,因为该函数正在运行,但由于您没有返回子元素,因此生成的数组无需呈现任何内容。

试试这个:

            {this.state.coinList.map((coin, index) => {
              alert (coin.symbol + ': ' + coin.price);
              return <CoinInfo
                key={index}
                symbol={coin.symbol}
                name={coin.name}
                price={coin.price}
                change={coin.change}
                active={false}
                onPress={this.fonPress}
              />;
            })}

我建议您查看以下链接以更好地了解Array.map:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

© www.soinside.com 2019 - 2024. All rights reserved.