React Native调用splice方法删除Flatlist条目未生效问题

• 核心问题：getDerivedStateFromProps逻辑错误
  这个生命周期函数每次组件更新都会执行，只要路由参数里还存在workout字段，就会把之前的workoutList重新拼接一次路由里的训练项，等于你刚删除完数据，这个生命周期又把被删的项加回去了，所以控制台打印的数组永远不变。
  修复方案：新增完成后清空路由参数，避免重复添加数据，在Workout类中新增以下生命周期：

  componentDidUpdate() {
    if (this.props.route.params?.workout) {
      this.props.navigation.setParams({ workout: undefined });
    }
  }
  

• 问题2：FlatList的keyExtractor配置错误
  你直接把条目对象toString()，得到的永远是[object Object]，所有列表项的key完全相同，FlatList会判定列表没有变化，不会触发重新渲染。
  修复方案：用每条数据自带的唯一key字段作为标识：

  keyExtractor={(item) => item.key.toString()}
  

• 问题3：removeItem方法this指向丢失
  普通函数默认没有绑定组件实例的this，调用时会找不到this.state导致删除逻辑执行失败。
  修复方案：把removeItem改成箭头函数绑定this：

  removeItem = (index) => {
    const newData = [...this.state.workoutList];
    newData.splice(index, 1);
    this.setState({workoutList: newData}); 
  }
  

• 问题4：新增页面submitWorkout传参顺序错误
  调用submitWorkout时重复传了两次Thursday，漏传了对应参数，会导致周几的选择数据错乱，按参数顺序修正即可：

  this.submitWorkout(
    this.state.workoutName,
    this.state.Monday,
    this.state.Tuesday,
    this.state.Wednesday,
    this.state.Thursday,
    this.state.Friday,
    this.state.Saturday,
    this.state.Sunday
  );
  

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