React Hooks 如何为state数组对象每条记录新增固定值字段

直接在接口请求拿到原始JSON数据后，用Array.map()做遍历转换即可，map会返回全新数组，遍历过程中通过对象展开语法创建新对象追加字段，完全不会修改原始接口返回的数据，符合React状态不可变更新规则。

修改后的完整代码 #

const [tableData, setTableData] = useState([])

useEffect(() => {
    if (fetchUrl) {
        fetch(fetchUrl)
            .then((res) => res.json())
            .then((rawData) => {
                // 遍历原数组，生成追加了webHost字段的新数组
                const processedData = rawData.map(item => ({
                    ...item,
                    webHost: "Instructure"
                }))
                setTableData(processedData)
            })                
    }
}, [fetchUrl])

实现说明 #

• map方法会返回全新的数组，不会修改原始接口返回的数组引用，符合React状态更新要求
• 遍历单条记录时，通过...item展开运算符拷贝原对象的所有属性到新对象中，不会修改原始条目对象
• 追加webHost: "Instructure"字段后，最终生成的数组结构和预期完全一致
• 这种写法不存在对象引用污染问题，React可以正常检测到状态变化触发组件重渲染

❌ 避坑提示：不要直接遍历原对象给item追加属性，比如写item.webHost = "Instructure"，这会直接修改原始接口返回的对象，违反状态不可变原则，可能导致组件不更新、状态污染等难以排查的问题。

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