Как объединить строку с JSON в react.js

#javascript #reactjs #url #fetch-api

Вопрос:

Я новичок в реагировании и пытаюсь делать простые вещи.

Я получаю данные JSON от BE, которые выглядят следующим образом:

 {"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 в методе класса выборки, но я не могу заставить его работать

Инструкция fetch :

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

Не могли бы вы, пожалуйста, помочь мне разобраться в этом ?
Спасибо.

Ответ №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
            })
        }
    })
}
 

Комментарии:

1. Рад, что смог помочь!

Ответ №2:

объедините URL-адрес, по которому вы хотите отобразить файл в браузере. вы можете использовать два разных состояния (одно для имени файла и одно для URL-адреса), чтобы объединить их, как с помощью литерала шаблона

${URL}${fileName}

или

 URL   fineName
 

Попробуйте это для использования КАРТЫ

const temp = data.map((ele) => { возврат { …ele, файл: url имя файла }; });

Комментарии:

1. Спасибо за комментарий, но мне нужно создать новый массив с помощью .map или чего-то другого со всеми теми же данными, но измененным местоположением. Его показывают во многих местах, я не хочу менять его везде.