React-Native Обновление Списка Представления DataSource

У меня есть приложение для iOS, которое я делаю с использованием собственного кода. Класс Game содержит компонент ListView. Я устанавливаю состояние в конструкторе и включаюdataSource, Прямо сейчас у меня есть жестко запрограммированный массив данных, который я храню в другом свойстве состояния (this.state.ds). Тогда вcomponentDidMount Я используюcloneWithRows способ клонировать мойthis.state.ds как мой источник данных для представления. Это довольно стандартно для ListViews и работает хорошо. Вот код:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

 var React = require("react-native");
 var { StyleSheet, Text, View, ListView, TouchableHighlight } = React;

class Games extends React.Component {
constructor(props) {
    super(props);
    var ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 != r2
    });
    this.state = {
        ds: [
            { AwayTeam: "TeamA", HomeTeam: "TeamB", Selection: "AwayTeam" },
            { AwayTeam: "TeamC", HomeTeam: "TeamD", Selection: "HomeTeam" }
        ],
        dataSource: ds
    };
}

componentDidMount() {
    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.state.ds)
    });
}
pressRow(rowData) {
    var newDs = [];
    newDs = this.state.ds;
    newDs[0].Selection = newDs[0] == "AwayTeam" ? "HomeTeam" : "AwayTeam";
    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(newDs)
    });
}

renderRow(rowData) {
    return (
        <TouchableHighlight
            onPress={() => this.pressRow(rowData)}
            underlayColor="#ddd"
        >
            <View style={styles.row}>
                <Text style={{ fontSize: 18 }}>
                    {rowData.AwayTeam} @ {rowData.HomeTeam}{" "}
                </Text>
                <View style={{ flex: 1 }}>
                    <Text style={styles.selectionText}>
                        {rowData[rowData.Selection]}
                    </Text>
                </View>
            </View>
        </TouchableHighlight>
    );
}
render() {
    return (
        <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderRow.bind(this)}
        />
    );
}
}
var styles = StyleSheet.create({
 row: {
    flex: 1,
    flexDirection: "row",
    padding: 18,
    borderBottomWidth: 1,
    borderColor: "#d7d7d7"
},
selectionText: {
    fontSize: 15,
    paddingTop: 3,
    color: "#b5b5b5",
    textAlign: "right"
}
});


module.exports = Games

У меня проблема возникает вpressRow метод. Когда пользователь нажимает на строку, я бы хотел, чтобы выбор изменился и чтобы он отображал изменения на устройстве. Через некоторую отладку я заметил, что хотя я меняюSelection свойство объекта вnewDs массив, то же свойство изменяется на объекте вthis.state.ds и так же изменяет объект вthis.state.dataSource._dataBlob.s1, В ходе дальнейшей отладки я обнаружил, что, поскольку эти другие массивы изменились, объект DataSource объекта ListView не распознает это изменение, потому что, когда я устанавливаю состояние иrowHasChanged называется, клонируемый массив совпадает с массивомthis.state.dataSource._dataBlob.s1 и поэтому это не похоже на изменение и не воспроизводится.

Есть идеи?

Ответы на вопрос(3)

Ваш ответ на вопрос