JavaScript如何为数组中的每个JSON对象新增自定义字段

实现方案 #

你可以用数组map方法遍历响应中的messages数组，结合对象扩展运算符保留原有属性，同时追加自定义字段即可，该方案符合React不可变数据的更新规范，不会修改原始响应数据。

核心处理逻辑

// 假设接口返回的原始响应数据存在response变量中
const processedResponse = {
  ...response,
  messages: response.messages.map(item => ({
    // 保留原对象所有字段
    ...item,
    // 新增自定义字段
    mString: item.status + 'A'
  }))
}

React函数组件完整示例

如果是配合useState存储数据使用，参考写法如下：

import { useState, useEffect } from 'react'
import axios from 'axios'

function MessageList() {
  const [messages, setMessages] = useState([])

  useEffect(() => {
    const getMessageData = async () => {
      try {
        const res = await axios.get('你的接口请求地址')
        // 处理数据新增字段
        const handledList = res.data.messages.map(item => ({
          ...item,
          // 兜底逻辑：status为空时避免出现undefinedA的异常值
          mString: (item.status ?? '') + 'A'
        }))
        setMessages(handledList)
      } catch (e) {
        console.error('接口请求失败', e)
      }
    }
    getMessageData()
  }, [])

  // 渲染时可直接读取每个元素的mString字段
  return (
    <div>
      {messages.map(item => (
        <div key={item.msgId}>{item.mString}</div>
      ))}
    </div>
  )
}

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