如何在 react.js 中将字符串与 JSON 连接起来

Question

我是新来的反应，我正在尝试做简单的事情。

我从 BE 收到 JSON 数据，如下所示：

{"data":[{"id":"12345",
"name":"Blabla",
"otherName":"3300",
"completeDate":"2021-10-01T05:00:00.000+0000",   
"status":"Active",
"location":"572957393.pdf"}]}

现在位置是文件存储在服务器上的位置，我需要将 data.location 与 URL 连接起来，所以当我渲染它时，我会看到这个"572957393.pdf"而不是这个"https://www.mypage.com/files/https572957393.pdf"

我认为最好的方法是在获取类方法中使用 .map 方法，但我无法使其工作

获取语句：

fetchData(params, id){
    axios({
        url:`/admin/${this.state.radioSelect}/detail`,
        method:'get',
        params
    }).then(resp => {
        //const updated = resp.data.map(location) => This is where I am trying to use .map method
        .then(resp => {
        if(resp.data.code == '200'){ 
            this.setState({
                pageSize:this.state.pagination.pageSize,
                records:resp.data.data,
                recordsTableSpin:false,
                recordsId:id,
            })
        }
    })
}

你能帮我弄清楚这个吗？ 谢谢。

Answer 1

如果我正确理解了您的问题，我认为您可以执行以下操作：

fetchData(params, id){
    axios({
        url:`/admin/${this.state.radioSelect}/detail`,
        method:'get',
        params
    }).then(resp => {
        if(resp.data.code == '200'){ 
            const updatedData = resp.data.data.map(element => ({
                ...element, 
                location: element.location + resp.data.location
            }))

            this.setState({
                pageSize: this.state.pagination.pageSize,
                records: updatedData,
                recordsTableSpin: false,
                recordsId: id
            })
        }
    })
}

Answer 2

将 URL 连接到您要在浏览器中显示文件的位置。 您可以使用两种不同的状态（一种用于文件名，一种用于 URL），以便您可以像使用模板文字一样连接它们

${URL}${fileName}

或者

URL + fineName

尝试使用 MAP

const temp = data.map((ele) => { return {...ele, file: url+fileName }; });