ListView Rendern Sie kein neues Element nach dem Statusupdate

Question

Ich habe ein React-Native-Projekt mit Redux.

Ich habe die Komponente "Kommentare" in der Komponente "ParentComponent" eingebettet.

Nach Kommentar hinzufügen meine "Kommentare" -Komponente erhalten den aktualisierten Zustand und rufen Render-Funktion mit neuen Array in Requisiten. Aber zeichne die neuen Zellen nicht auf listView.

Mein ActionComments-Code

addComment:

if(parent_id){ 
    commentsList[parent_index].responses.push(responseObject) 
}else{ 
    commentsList.splice(0, 0, responseObject) 
} 
Actions.pop() 

var newList = commentsList 
dispatch(commentsListUpdate(newList)) 

CommentListUpdate:

function commentsListUpdate(list) { 
    return { 
    type: types.COMMENTS_LIST_UPDATE, 
    list 
    }; 
} 

Meine Reducer:

case types.COMMENTS_LIST_UPDATE: 
    return { 
    ...state, 
    isFetching: false, 
    list: action.list 
    }; 

Meine Komponente:

class Comments extends Component { 
    render(){ 
    let ds = new ListView.DataSource({ 
     rowHasChanged: (r1, r2) => r1 !== r2 
    }); 
    let dataSource = ds.cloneWithRows(this.props.list); 

    return (
     <ListView 
     dataSource={dataSource} 
     renderRow={this._renderRow.bind(this)} 
     /> 
    ) 
    } 

    _renderRow(rowData: string, sectionID: number, rowID: number) { 
     return (
      <View style={Styles.viewStyle}> 
       <Comment 
        name={rowData.user.full_name} 
        avatar={rowData.user.photo_dir} 
        comment={rowData.content} 
        list={rowData.responses} 
        dispatch={this.props.dispatch} 
        owner_id={this.props.owner_id} 
       /> 
      </View> 
     ) 
    } 
} 

Answer 1

Können Sie uns Ihren Reduzierer zeigen? Ich denke, dass Sie den Status stumm geschaltet haben durch das neue Element wie folgt drücken:

case 'ADD_ITEM': 
    return state.push(item) 

Wenn Sie den Status Redux mutieren nicht den Unterschied zwischen den alten Zustand und NEW Zustand sehen. Stattdessen müssen Sie ein neues Array zurück:

case 'ADD_ITEM': 
    return [...state, item] 

bearbeiten (compiled code)

case 'ADD_ITEM': 
    return [].concat(state, [item])