React Native中如何让组件props具备状态感知实现用户列表更新

问题根因 #

你当前的写法有两个核心问题：

1. React遵循单向数据流规则，子组件无权直接修改父组件传递的props值。你直接执行user.active = false属于直接修改引用类型的属性，没有触发父组件的setState操作，父组件的this.state.users没有更新，自然不会触发子组件重渲染，列表也就不会更新。
2. React状态更新必须遵循不可变原则，不能直接修改原状态对象的属性，必须返回新的状态对象才能触发React的更新检测。

解决方案步骤 #

第一步：在父组件（App.js）中定义修改users状态的方法 #

给父组件新增更新用户状态的方法，用不可变的方式更新users数组：

// App.js 中添加方法
toggleUserStatus = (targetUserId) => {
  this.setState(prevState => ({
    users: prevState.users.map(user => {
      // 匹配到目标用户时返回新对象，其他用户直接返回原对象
      return user.id === targetUserId ? {...user, active: false} : user
    })
  }))
}

使用组件时把这个方法作为props传给子组件：

<MyComponent 
  users={this.state.users} 
  onToggleUser={this.toggleUserStatus}
></MyComponent>

注意：这里假设你的每个user对象都有唯一的id属性作为标识，如果没有可以用其他唯一字段比如name代替，不推荐用数组下标作为唯一标识。

第二步：修改子组件（MyComponent）的逻辑 #

子组件不需要自己修改user对象，直接调用父组件传过来的回调方法即可：

// MyComponent 中修改toggleUser方法
const toggleUser = (user) => {
  Alert.alert(
    "Toggle",
    "You sure?",
    [
      {
        text: "Yes",
        onPress: () => {
          // 调用父组件传的回调，把要修改的用户id传过去
          props.onToggleUser(user.id)
        },
        style: "cancel",
      },
      {
        text: "Cancel",
        onPress: () => console.log("Cancel Pressed"),
        style: "default",
      },
    ],
    { cancelable: false }
  );
};

小优化：你已经用activeUsers过滤了活跃用户，渲染的时候不需要再加u.active == true的冗余判断。

补充说明 #

你提到的「让props具备状态感知能力」本质就是：props本身是父组件状态的映射，只要父组件的状态正确触发更新，props就会自动同步更新，子组件就会感知到变化重渲染，不需要在子组件额外做特殊处理。

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