Javascript 动态添加的视图没有样式函数

我正在我的应用程序中使用旋转木马（取自此处）

我试图在每次用户向右滑动时添加一个视图

这就是我正在使用的代码：

export default class AllRand extends Component
{ 

  constructor(props)
  {    
    super(props);
    this.state = 
    {
      myArr: ['Page numebr: ', 'Page numebr: ']
    };
  } 

  _onPageSwitchAnimateEnd()
  {
    this.state.myArr.push('Page numebr: ')
    this.setState({
        myArr: this.state.myArr
    })
  }

  render()
  {    
    let Arr = this.state.myArr.map((text, index) => {
      return <View key={ index } style={ styles.shit1 }><Text>asdasd { index }</Text></View>                            
    })      

    return (
      <Carousel animate={false} hideIndicators={false} onPageChange={() => this._onPressOut()}>
        { Arr }
      </Carousel>
    );
  }
}

导出默认类AllRand扩展组件
{ 
建造师（道具）
{    
超级（道具）；
此.state=
{
myArr:['Page numebr:'，'Page numebr:']
};
} 
_onPageSwitchAnimateEnd（）
{
this.state.myArr.push（'Page numebr:'）
这是我的国家({
myArr:this.state.myArr
})
}
render（）
{    
让Arr=this.state.myArr.map（（文本，索引）=>{
返回asdasd{index}
})      
返回(
这是。_onPressOut（）}>
{Arr}
);
}
}

我成功地添加了一个视图，但它不具有样式、文本“页码：”和索引

更新：

更改了我的代码，但仍然不起作用

'use strict';

import React, { Component } from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import Carousel from 'react-native-carousel';
import FactsApiFetcher from './facts-api-handler/facts-api-fetcher'

export default class AllRand extends Component
{ 

  constructor(props)
  {    
    const InitialnumberOfPages = 2;

    super(props);
    this.state = 
    {
      numberOfPages: InitialnumberOfPages,
      Pages: this._setInitialPages(InitialnumberOfPages)
    };
  } 

  _onPageSwitchAnimateEnd()
  {    
    let updatedNumberOfPages = this.state.numberOfPages + 1;
    let newArr = this._addPage(updatedNumberOfPages);

    this.setState({        
        numberOfPages: updatedNumberOfPages,        
        Pages: newArr
    });
  }

  render()
  {   
    return (
      <Carousel animate={false} hideIndicators={false} onPageChange={() => this._onPageSwitchAnimateEnd()}>
        { this.state.Pages }
      </Carousel>
    );
  }

  _setInitialPages(numberOfPages)
  {
    let tempArr = [];

    for(let i = 0; i < numberOfPages; i++)
    {
      tempArr.push(<View key={ i } style={ styles.shit1 }><FactsApiFetcher/></View>);
    }   

    return tempArr;
  }

  _addPage(updatedNumberOfPages)
  {    
    return this.state.Pages.concat([<View key={ updatedNumberOfPages - 1 } style={ styles.shit1 }><FactsApiFetcher/></View>]);    
  }
}

const styles = StyleSheet.create({
  shit1: {
    alignSelf: 'stretch',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFF00'
  }
});

AppRegistry.registerComponent('AllRand', () => AllRand);

“严格使用”；
从“React”导入React，{Component}；
进口{
评估学，
样式表，
文本
看法
}从“反应本机”；
从“react native Carousel”导入转盘；
从“./facts api处理程序/facts api获取程序”导入FactsApiFetcher
导出默认类AllRand扩展组件
{ 
建造师（道具）
{    
常量InitialnumberOfPages=2；
超级（道具）；
此.state=
{
numberOfPages:InitialnumberOfPages，
页数：此。\设置初始页数（初始页数）
};
} 
_onPageSwitchAnimateEnd（）
{    
让updatedNumberOfPages=this.state.numberOfPages+1；
设newArr=this.\u addPage（updatedNumberOfPages）；
这个.setState（{
numberOfPages:updatedNumberOfPages，
页码：newArr
});
}
render（）
{   
返回(
这是。_onPageSwitchAnimateEnd（）}>
{this.state.Pages}
);
}
_setInitialPages（numberOfPages）
{
设tempArr=[]；
for（设i=0；iAllRand）；

所以问题最终是因为我使用的转盘库（）中有一个bug。出于某种原因，添加页面的回调函数正在弄乱页面数组（不知道为什么…）

当我尝试使用另一个旋转木马库时，该函数起作用

---

在这段经历之后，我能给出的唯一建议是，当您认为您已尝试了所有可能的方法来修复您的bug时，请尝试更改您正在使用的库（到另一个相同的功能库）。

不确定它是否导致了您的bug，但

this.state.myArr.push（'Page numebr:'）

将改变原始状态对象。下面的

setState

可能最终会写下你的变异。最佳做法是使用创建新数组的函数，然后在

setState

中使用新数组。您的意思是这样的吗？（仍然不工作…）。我会尝试_onPageSwitchAnimateEnd（）{this.setState（（prevState）=>（{myArr:prevState.myArr.concat（['blablabla']]））}Array.prototype.concat接受两个数组，连接它们并返回一个新数组（原始数组未修改）。在您的示例中，temp只是对原始数组的引用，因此按下将修改原始数组。但我不确定这是否是问题所在。你想把你的项目放到Github上吗？也许人们可以玩它，让它工作Bitbucket也为你工作吗？（我只想与您共享这个项目，我看到github中的所有存储库都必须是公共的）。你的用户名是什么？尝试其他库的好建议。我发现库的质量是可变的，特别是当你做的事情与作者的用例不完全一样时。很高兴你成功了！