如何替换React数组对象的键名，为值分配自定义键？

核心问题出在没有在存入数组前显式映射键名——你之前可能直接把表单收集的旧键名对象塞进了数组，所以控制台输出还是旧结构。下面是具体可行的实现方式：

关键思路 #

表单输入阶段可以继续用原有键名（id、textVal、dateVal）收集数据，在添加/更新记录的环节，将表单数据转换为自定义键名（newId、franchise、dateData）的新对象，再存入数组。

完整代码示例 #

import { useState } from 'react';

function RecordHandler() {
  // 存储最终的自定义键名数组
  const [records, setRecords] = useState([]);
  // 收集表单输入的临时对象（沿用旧键名）
  const [formData, setFormData] = useState({ id: '', textVal: '', dateVal: '' });
  // 标记是否处于编辑状态
  const [editingId, setEditingId] = useState(null);

  // 正常收集表单输入，无需修改
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  // 添加新记录：转换键名后存入数组
  const handleAdd = () => {
    const formattedRecord = {
      newId: formData.id,
      franchise: formData.textVal,
      dateData: formData.dateVal
    };
    setRecords(prev => [...prev, formattedRecord]);
    // 重置表单
    setFormData({ id: '', textVal: '', dateVal: '' });
  };

  // 进入编辑模式：把自定义键名的记录转回表单旧键名填充输入框
  const handleEdit = (record) => {
    setFormData({
      id: record.newId,
      textVal: record.franchise,
      dateVal: record.dateData
    });
    setEditingId(record.newId);
  };

  // 更新记录：同样转换键名后替换原数组项
  const handleUpdate = () => {
    const updatedRecords = records.map(item => 
      item.newId === editingId 
        ? {
            newId: formData.id,
            franchise: formData.textVal,
            dateData: formData.dateVal
          }
        : item
    );
    setRecords(updatedRecords);
    setEditingId(null);
    setFormData({ id: '', textVal: '', dateVal: '' });
  };

  return (
    <div>
      <input
        name="id"
        value={formData.id}
        onChange={handleChange}
        placeholder="输入ID"
      />
      <input
        name="textVal"
        value={formData.textVal}
        onChange={handleChange}
        placeholder="输入Franchise"
      />
      <input
        name="dateVal"
        type="date"
        value={formData.dateVal}
        onChange={handleChange}
      />
      <button onClick={editingId ? handleUpdate : handleAdd}>
        {editingId ? '更新记录' : '添加记录'}
      </button>

      <div className="records-list">
        {records.map(record => (
          <div key={record.newId}>
            <p>ID: {record.newId}</p>
            <p>Franchise: {record.franchise}</p>
            <p>Date: {record.dateData}</p>
            <button onClick={() => handleEdit(record)}>编辑</button>
          </div>
        ))}
      </div>
    </div>
  );
}

export default RecordHandler;

重点说明 #

1. handleChange只负责收集输入，不用修改——表单输入框的name属性对应旧键名，这一步是正常的数据流。
2. 真正的键名转换发生在handleAdd和handleUpdate中：通过创建新对象，用自定义键名对应表单数据的旧键值，确保存入数组的是符合要求的结构。
3. 编辑时需要反向转换：把自定义键名的记录值转回表单的旧键名，才能正确填充输入框。

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