React Native中选中FlatList项更新data数组不生效问题排查

核心问题点 #

• Array.map 参数顺序错误
  你写的data.map((item, key, index) => ...)不符合map的参数规则，map的参数顺序为(当前元素, 元素索引, 原数组)，你拿到的index实际是整个data数组本身，完全无法用于定位要修改的数组项。
• 未存储当前要修改的数组项索引
  你点击Draggable组件弹出选择框时，没有记录当前点击的是第几个Draggable对应的数组项，选完名称后不知道要更新data数组的哪个位置。
• 更新逻辑触发时机错误
  你把updateArray函数传给了Draggable的renderText属性，这个属性的作用是返回组件要渲染的文本内容，不会执行你的数组更新逻辑。
• 柯里化函数未执行
  updateArray是柯里化函数，即使触发位置正确，你只写updateArray(index)也只是返回了内层函数，没有调用执行，不会触发更新逻辑。

修复代码 #

1. 新增状态存储当前编辑索引 #

// 建议初始化空字符串避免undefined问题
const [name, setName] = useState('');
// 新增状态存储当前要修改的数组项索引
const [currentEditIndex, setCurrentEditIndex] = useState(null);

2. 修正Draggable渲染逻辑 #

{
  // 修正map参数顺序
  data.map((item, index) => (
    <Draggable
      x={10}
      y={200}
      key={index} // 建议替换为item的唯一业务ID，性能更优
      renderColor="blue"
      renderSize={50}
      // 点击时先存储当前编辑索引再打开弹窗
      onShortPressRelease={() => {
        setCurrentEditIndex(index);
        setModalVisiblePlayer(true);
      }}
      isCircle
      textcolor="#000000"
      // renderText仅返回要显示的文本内容
      renderText={() => item || '未选择'}
      onDragRelease={(e) => {
        setItemPosition(index, e.nativeEvent.pageX, e.nativeEvent.pageY);
        console.log(item.X);
        console.log(item.Y);
      }}
    />
  ));
}

3. 修正FlatList选中逻辑，选中后直接更新数组 #

<FlatList
  numColumns={1}
  horizontal={false}
  data={players}
  renderItem={({item}) => (
    <View>
      <PlayersListCard
        playersName={item.name}
        deleteIcon="add-circle-outline"
        click={() => {
          setModalVisiblePlayer(false);
          const selectedName = item.name;
          setName(selectedName);
          // 用之前存储的索引更新对应数组项
          if (currentEditIndex !== null) {
            const newArr = [...data];
            newArr[currentEditIndex] = selectedName;
            setData(newArr);
            // 重置编辑索引避免后续误改
            setCurrentEditIndex(null);
          }
        }}
      />
    </View>
  )}
/>

如果没有其他场景复用updateArray函数可以直接删除，否则在选中逻辑里调用updateArray(currentEditIndex)()即可触发更新。

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