Question

我正在研究<ListView>组件，我有一个名单列表，但在更改状态后，它正在更改值，但它不会重新呈现ListView。

isSelect：false - （状态）

isSelect：true - （State）

代码：

var designerName = [{id: 'Calvin Klein', name: 'Calvin Klein', isSelected: false},
                {id: 'Donatella Versace', name: 'Donatella Versace', isSelected: false},
                {id: 'Valentino Garavani', name: 'Valentino Garavani', isSelected: false},
                {id: 'Giorgio Armani', name: 'Giorgio Armani', isSelected: false}];

export default class filter extends Component {
    constructor() {
        super();
        const listDs = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2,
        });
        this.state = {
            listDs:designerName
        };
    }

componentDidMount(){
   this.setState({
    designerDataSource:this.state.designerDataSource.cloneWithRows(this.state.listDs),
    })
}

render() {
    return (
        <View>
            <ListView
                dataSource={this.state.designerDataSource}
                renderRow={this.renderRow.bind(this)}
            />
        </View>
    );
}

renderRow(item){
    return (
        <TouchableHighlight key={item.id} onPress={this.onItemDesigner.bind(this, item)}>
                <View>
                    <View>
                        {this.renderName(item)}
                    </View>
                    <View>
                        <Text>{item.name}</Text>
                    </View>
                </View>
            </TouchableHighlight>
    );
}

renderName(item){
    if(item.isSelected) {
        return(
            <Image 
                style={{
                    width: 15,
                    height:15}} 
                source={require('../images/black_tick_mark.png')} />
        );
    }
}

onItemDesigner(item){
    var tempDesigner = this.state.listDs.slice();

    for(var i=0; i<tempDesigner.length; i++){
        if (tempDesigner[i].id == item.id && !tempDesigner[i].isSelected) {
            tempDesigner[i].isSelected = true;
        }else if (tempDesigner[i].id == item.id && tempDesigner[i].isSelected){
            tempDesigner[i].isSelected = false;
        }   
    }
    this.setState({
        designerDataSource: this.state.designerDataSource.cloneWithRows(tempDesigner),
    });
   }
}

如果您找到任何解决方案，请通过我的上述代码告诉我。

由于

Answer 1

问题是部分Javascript，部分ListView。当您构造ListView.DataSource时，它源于此函数。

const listDs = new ListView.DataSource({
  rowHasChanged: (r1, r2) => r1 !== r2,
});

rowHasChanged控制渲染是否应该发生，并且检查旧对象是否等于新对象。

如果其中一个项目已更改，则将两个对象一起比较不会返回false。它正在检查实际对象本身是否指向不同的内存位置。

考虑这些例子。

let array1 = [{foo: 'bar'}]
let array2 = array1.slice()
// sliced array still contains references to the items
console.log(array2[0] === array1[0])
// => true

// change something in array1
array1[0].foo = 'test'
// you'll see the change in array2 as well
console.log(array2[0].foo)
// => 'test'

要使其具有新的变量位置，您可以创建一个空的{}对象并遍历原始键并将键/值保存到新的键中，或者更容易使用{{1}克隆对象。

JSON.parse(JSON.stringify(obj))

你可以从技术上克隆整个阵列，或者只改变那个。我认为只在更改的对象上执行它以防止不需要的渲染会更有效。

查看Object equality in JavaScript。

反应原生状态改变后，ListView不会重新渲染吗？

1 个答案: