React Native + Native Base：数据变更无法在界面同步

你遇到的这个问题其实很常见——列表和初始数据都渲染正常，但点击复选框时完全没反应，始终停留在初始的选中状态对吧？核心问题出在你直接修改state里的数组元素，这种操作不会触发React Native的组件重新渲染机制。

问题根源 #

React组件只有在通过setState()方法更新状态时，才会触发重新渲染。你在onPress里直接修改rowData.item.done = !rowData.item.done，只是改变了对象的属性值，但并没有通知React状态发生了变化，所以FlatList根本不知道要更新UI。

修复方案 #

我们需要通过setState()来更新整个数据数组，同时要保证状态的不可变性（不要直接修改原数组，而是创建新的数组副本）。下面是修改后的完整代码：

import React, { Component } from 'react';
import { FlatList, Text, CheckBox, View } from 'react-native';

// 假设你的ListItem是自定义组件，若为第三方库请正确引入
const ListItem = ({ children }) => <View style={{ flexDirection: 'row', alignItems: 'center', padding: 10 }}>{children}</View>;

export default class FlatListBasics extends Component {
  constructor() {
    super();
    this.state = {
      data: [
        {key: 'Devin', done: true},
        {key: 'Jackson', done: true},
        {key: 'James', done: true},
        {key: 'Joel', done: true},
        {key: 'John', done: true},
        {key: 'Jillian', done: false},
        {key: 'Jimmy', done: true},
        {key: 'Julie', done: true}
      ]
    }
  }

  _renderRow = ({ item, index }) => { // 解构item和index让代码更清晰
    return (
      <ListItem>
        <CheckBox
          checked={item.done}
          onPress={() => {
            // 创建原数组的浅拷贝，避免直接修改state
            const newData = [...this.state.data];
            // 创建对应item的副本并修改done状态
            newData[index] = { ...item, done: !item.done };
            // 通过setState通知React更新状态
            this.setState({ data: newData });
          }}
        />
        <Text style={{ marginLeft: 10 }}>{item.key}</Text>
      </ListItem>
    )
  }

  render() {
    return (
      <FlatList
        data={this.state.data}
        renderItem={this._renderRow}
        extraData={this.state} // 保证state变化时FlatList重新渲染列表项
      />
    );
  }
}

关键要点说明 #

• 不可变性原则：用[...this.state.data]创建原数组的浅拷贝，再用{ ...item, done: !item.done }生成对应item的副本，避免直接修改原state中的对象，符合React状态更新的规范。
• setState触发更新：只有调用this.setState()，React才能感知到状态变化，进而重新渲染FlatList和对应的复选框。
• extraData的作用：你之前添加的extraData={this.state}是正确的，它会告诉FlatList：当state中的任何数据发生变化时，都要重新渲染列表项，现在配合正确的state更新方式就能正常生效了。

内容的提问来源于stack exchange，提问作者Jahid Shohel