React.js中如何将JSON数据字段与固定URL字符串拼接？

修改后的完整代码如下：

fetchData(params, id){
    axios({
        url:`/admin/${this.state.radioSelect}/detail`,
        method:'get',
        params
    }).then(resp => {
        if(resp.data.code == '200'){ 
            // 遍历数组处理每条数据的location字段
            const processedRecords = resp.data.data.map(item => {
                return {
                    // 保留原有所有字段
                    ...item,
                    // 替换location为拼接后的完整地址
                    location: `https://www.mypage.com/files/https${item.location}`
                }
            })
            this.setState({
                pageSize:this.state.pagination.pageSize,
                records: processedRecords, // 传入处理后的数组
                recordsTableSpin:false,
                recordsId:id,
            })
        }
    })
    // 建议补充错误捕获逻辑避免请求异常导致页面卡死
    .catch(err => {
        console.error('请求异常：', err)
        this.setState({
            recordsTableSpin: false
        })
    })
}

核心修改说明 #

• 移除原代码里多余的嵌套.then，axios请求返回的resp已经包含完整的后端响应数据，不需要二次回调处理
• map是数组专属方法，需要对后端返回的resp.data.data数组调用，不能直接对resp.data执行map操作
• 拼接路径时如果前缀后续可能调整，建议抽离为公共常量，比如const FILE_PREFIX = 'https://www.mypage.com/files/https'，后续修改更高效
• 如果存在location为空的场景，可加判断逻辑避免生成无效地址，示例：location: item.location ? ${FILE_PREFIX}${item.location} : ''

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