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

Question

我是 React 的新手，我正在尝试做一些简单的事情。

我收到来自 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"

我认为最好的方法是在 fetch class 方法中使用 .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

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

${URL}${fileName}

或

URL + fineName

使用 MAP 试试这个

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

Answer 2

如果我没有理解你的问题，我认为你可以执行以下操作：

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
            })
        }
    })
}

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

How to concatenate string with JSON in react.js

javascript

url

reactjs

fetch-api