反應本機地圖方法未渲染

Question

我正在做一個簡單的加密貨幣應用程序，以顯示每日價格和變化。 當使用第一個硬幣的信息以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個...

感謝您的幫助

Answer 1

使用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/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map