一次更新dataSource后，本机ListView无法正常工作

Question

enter image description here

大家好，我在这里尝试制作一个游戏，但我遇到的问题是第一次点击瓷砖会改变图像，然后下一次点击之后瓷砖的图像不会改变这是一个问题在

之后它不会重新渲染的listView

ListSection组件

           class ListSection extends Component{


            renderRow(image){
                console.log("each image",image)
                return (<Row image={image}/>)
            }
            render(){
                console.log("props",this.props)
                return(
                    <View>
                        {this.props.fetched==1?(
                            <ListView  
                                initialListSize={16}
                                removeClippedSubviews={false} 
                                enableEmptySections
                                contentContainerStyle={Style.ListViewStyle}
                                dataSource={this.props.datasource} 
                                renderRow={this.renderRow}/>)
                                :null}
                    </View>
                )
            }
        }


        const Style={
            ListViewStyle:{
                flexDirection: 'row',
                flexWrap:'wrap',
            }
        }


        const mapStateToProps=state=>{
            console.log("state",state);
            const {datasource,fetched,imageArray}=state.list;
            return{
            datasource,
            fetched,
            imageArray 
            }
        }


        export default connect(mapStateToProps,actions)(ListSection);

行组件

          class Row extends Component{

          render(){

              console.log('element',this.props)
              const {element,i}=this.props.image
              const {imageArray,turn}=this.props;
              return(
              <View style={Style.containerStyle} >
                      <TouchableWithoutFeedback onPress={()=>this.props.changeElement(imageArray,turn,i)} >  
                          <Image  style={{width:78.8,height:79}}
                                  source={element}/>
                      </TouchableWithoutFeedback>
              </View>
              )
          }
      }
      Style={
          containerStyle:{
            borderWidth:13,
            borderColor:'#424242',
            width:102.8
          }
        }
      mapStateToProps=state=>{
        console.log("State in Row",state)
        const {imageArray,turn,image1}=state.list;
        return {imageArray,turn,image1}
      }

      export default connect(mapStateToProps,actions)(Row);

Answer 1

大家好，我已经离开了一段时间，我已经想出了这个问题的答案，之前我将展示我正在使用的动作和减速器的代码

动作

        export const listfirst=()=>{

        return{
            type:'initial',
        }
    }


    export const changeElement=(index)=>{

        return{
            type:'change',
            index
        }
    }

减速器

        const INITIAL_STATE={
            datasource:"",
            fetched:0,
            turn:'S',
            imageArray:'',
            touchability:[]
        }

        export default (state=INITIAL_STATE,action)=>{

        switch(action.type){
        case 'initial':
        let array=[];
        let image=require('../drawable/grey.jpg')
        for(let i=0;i<16;i++){
            array[i]={element:image,i:i}
            state.touchability[i]=1;
        }
        console.log("array here",array,state.touchability);
        const ds = new ListView.DataSource({
            rowHasChanged:(r1,r2)=>r1!==r2 
            });
        this.dataSource=ds.cloneWithRows(array);
        state.imageArray=array;
        return{ 
            ...state,
            datasource:dataSource,
            fetched:1 
        }

        case 'change':
        console.log("actione",action)
        array=[];
        if(state.turn=='S'&&state.touchability[action.index]===1){
            image=require('../drawable/S.png')
            state.imageArray[action.index]={element:image,i:action.index}
            state.turn='O'
            state.touchability[action.index]=0;
        }
        else if(state.turn=='O'&&state.touchability[action.index]==1){
            image=require('../drawable/O.png');
            state.imageArray[action.index]={element:image,i:action.index}
            state.turn='S'
            state.touchability[action.index]=0;        
        }
        array=state.imageArray
            ds = new ListView.DataSource({
            rowHasChanged:(r1,r2)=>r1!==r2 
            });
        this.dataSource=ds.cloneWithRows(array);
        return {
            ...state,
            datasource:dataSource
        }
        default:
        return state    
        }
        }

好的，上面显示的是我的动作和减速器。我遇到的问题是由于ListView数据源的更新直接使用状态数据ImageArray但是当我使用

更改更新时

  

阵列= state.imageArray

因此它现在运作良好，正如我预期的那样