React Native中如何更新数组指定元素值：为学生abc增加分数

需求说明 #

现有如下数组：

[{
    "studentname": "abc",
    "marks": "20"
},
{
    "studentname": "abc2",
    "marks": "20"
}]

需要将studentname为abc的元素的marks值增加10（即20+10=30），最终得到目标数组：

[{
    "studentname": "abc",
    "marks": "30"
},
{
    "studentname": "abc2",
    "marks": "20"
}]

函数组件实现方案 #

在React Native函数组件中，结合useState状态管理和数组map方法实现（遵循React状态不可变原则，不直接修改原数组）：

import { useState, Button } from 'react';
import { View } from 'react-native';

const StudentComponent = () => {
  // 初始化学生数据状态
  const [students, setStudents] = useState([
    { studentname: "abc", marks: "20" },
    { studentname: "abc2", marks: "20" }
  ]);

  // 定义更新成绩的函数
  const updateAbcMarks = () => {
    const updatedStudents = students.map(student => {
      // 匹配目标学生
      if (student.studentname === "abc") {
        // 转换marks为数字计算后转回字符串，保持原格式
        return {
          ...student,
          marks: (parseInt(student.marks, 10) + 10).toString()
        };
      }
      // 其他学生数据保持不变
      return student;
    });
    // 更新状态触发组件重渲染
    setStudents(updatedStudents);
  };

  return (
    <View>
      <Button title="更新abc的成绩" onPress={updateAbcMarks} />
    </View>
  );
};

export default StudentComponent;

类组件实现方案 #

如果使用类组件，逻辑类似，通过setState更新状态：

import React, { Component } from 'react';
import { View, Button } from 'react-native';

class StudentComponent extends Component {
  state = {
    students: [
      { studentname: "abc", marks: "20" },
      { studentname: "abc2", marks: "20" }
    ]
  };

  updateAbcMarks = () => {
    const updatedStudents = this.state.students.map(student => {
      if (student.studentname === "abc") {
        return {
          ...student,
          marks: (parseInt(student.marks, 10) + 10).toString()
        };
      }
      return student;
    });
    this.setState({ students: updatedStudents });
  };

  render() {
    return (
      <View>
        <Button title="更新abc的成绩" onPress={this.updateAbcMarks} />
      </View>
    );
  }
}

export default StudentComponent;

关键要点 #

• 使用map方法生成新数组，避免直接修改原状态数组，符合React的状态不可变要求
• 由于marks是字符串类型，需要先用parseInt转换为数字进行计算，再转回字符串保持格式一致
• 通过扩展运算符...student复制原对象的其他属性，仅修改marks字段，确保其他数据不受影响

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