如何在React Native对象中向games1数组添加新playername项

假设你的数组是通过useState钩子管理的组件状态——React Native里必须通过状态更新触发组件重渲染，直接修改原数据不会生效。

操作步骤 #

• 定位数组中包含games1的对象（即数组第一个元素）
• 基于原games1数组创建新数组并添加目标对象，遵循React不可变更新原则，避免直接修改原状态
• 更新整个状态数组，替换原有第一个对象

代码示例 #

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

export default function YourComponent() {
  // 初始化状态
  const [gameData, setGameData] = useState([
    {
      "games1": [{ "playername": "1" }]
    },
    {
      "games2": [
        { "playername": "1" },
        { "playername": "2" }
      ]
    }
  ]);

  // 实现添加逻辑的函数
  const addPlayerToGames1 = () => {
    // 复制原状态数组，避免直接修改
    const updatedGameData = [...gameData];
    // 复制games1数组并追加新玩家对象
    const updatedGames1 = [...updatedGameData[0].games1, { playername: "2" }];
    // 更新第一个对象的games1属性
    updatedGameData[0] = { ...updatedGameData[0], games1: updatedGames1 };
    // 触发状态更新
    setGameData(updatedGameData);
  };

  return (
    <TouchableOpacity onPress={addPlayerToGames1} style={{ padding: 16, backgroundColor: '#eee' }}>
      <Text>给games1添加玩家2</Text>
    </TouchableOpacity>
  );
}

补充说明 #

• 使用扩展运算符(...)复制数组和对象，确保每次更新都生成新引用，让React能检测到状态变化并触发重渲染
• 如果数组是普通变量，非组件状态，可直接执行push，但这种方式无法触发UI更新，在React Native组件开发中不推荐：

  // 普通变量场景仅作示例，组件中请勿使用
  const gameData = [/* 你的初始数组 */];
  gameData[0].games1.push({ playername: "2" });
  

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