React Native TypeScript点击Add自动生成带序号键的路由对象

总共调整3处核心逻辑：类型定义、初始状态值、新增方法，同时修复原有onAdd的语法问题。

• 第一步：调整类型定义
  保留原有单条路由详情的IRoute结构，新增数组元素的包装类型，匹配「数字序号为键、路由对象为值」的存储结构：

// 单条路由详情结构保持原有定义不变
export interface IRoute {
  amount?: string;
  id?: number;
  location?: string
}

// 新增：路由数组元素的包装类型，key为从0开始递增的数字序号
type TRouteItem = {
  [key: number]: IRoute
}

• 第二步：修正初始状态
  初始第一条路由需要套上序号0的键包装，同时把useState的泛型从IRoute[]改成TRouteItem[]，和实际存储结构对齐：

export const initialRoute: IRoute = {
  amount: '',
  id: 0,
  location: ''
}

// 泛型改为TRouteItem[]，初始值套上0序号的外层包装
const [route, setRoute] = useState<TRouteItem[]>([{0: initialRoute}]);

• 第三步：重写onAdd新增逻辑
  原onAdd存在语法错误（未调用setRoute、存在冗余text属性、未用函数式更新易拿到陈旧状态），修改后直接取当前数组长度作为下一个序号（数组长度和已有元素的最大序号刚好差1，比如已有2个元素对应序号0、1，下一个序号就是2，天然保证递增不重复），新项按{[序号]: 路由对象}的结构组装后追加到数组：

const onAdd = () => {
  setRoute(prevState => {
    // 当前数组长度即为下一个元素的序号
    const nextIndex = prevState.length;
    // 替换为实际业务需要的路由字段值即可
    const newRouteItem: IRoute = {
      amount: '54',
      id: nextIndex,
      location: 'Test'
    }
    // 新项套上序号键后追加到数组末尾
    return [...prevState, {[nextIndex]: newRouteItem}]
  })
}

修改后点击Add生成的数组结构和预期完全一致，且函数式更新的写法可以规避闭包导致的状态陈旧问题，不会出现序号重复。

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