求助：React Native中使用useState通过索引更新数组的正确方法

嘿，我来帮你搞定这个数组更新的问题～你之前的写法之所以无效，是因为误解了useState更新函数的用法，直接赋值的方式不符合React状态不可变的原则。

问题出在哪？ #

你写的setMyCustomArray([n] = 'something')完全不对——useState的更新函数需要接收一个新的数组实例，而不是直接对索引赋值。而且React状态是不可变的，永远不能直接修改原状态数组，必须创建副本后再修改。

正确的实现方式 #

这里有两种常用的有效方法：

方法1：解构复制数组后修改

先通过扩展运算符...复制原数组，修改指定索引的元素后，再传给更新函数：

import React, { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

const MyScreen = props => {
  const [myCustomArray, setMyCustomArray] = useState(Array(5).fill(0));
  
  const onClickHandler = (n) => {
    // 复制原数组，创建新的数组实例
    const newArray = [...myCustomArray];
    // 修改指定索引的元素
    newArray[n] = 'something';
    // 更新状态
    setMyCustomArray(newArray);
  }

  return (
    <View style={{ padding: 20 }}>
      {myCustomArray.map((item, index) => (
        <TouchableOpacity 
          key={index} 
          onPress={() => onClickHandler(index)}
          style={{ marginVertical: 10 }}
        >
          <Text>{item}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
}

export default MyScreen;

方法2：使用函数式更新+map

如果你的新状态依赖于之前的状态，推荐用函数式更新（因为它能确保拿到最新的状态值），结合map方法生成新数组：

const onClickHandler = (n) => {
  setMyCustomArray(prevArray => 
    prevArray.map((item, index) => 
      // 只有目标索引的元素被修改，其余保持原样
      index === n ? 'something' : item
    )
  );
}

核心原则 #

记住：React状态是不可变的，任何状态更新都必须返回一个新的引用（比如新数组、新对象），这样React才能检测到变化并触发组件重新渲染。直接修改原状态不会触发更新，这就是你之前代码无效的根本原因。

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