Я использую вход, чтобы позволить пользователю выбирать файлы со своего компьютера и добавлять его в список. Я делаю это, используя обещание для загрузки файлов и создавая массив обещаний и добавляя его в мое состояние
Реакция JS
this.state = {
files: [],
};
const readFile = (file) => {
const fileReader = new FileReader();
return new Promise((resolve, reject) => {
fileReader.onerror = (error) => {
reject({ error })
}
fileReader.onload = (e) => {
resolve({
name: file.name.replace( /_|\.mp3/gi, " "),
link: e.target.result,
id: id++,
})
}
fileReader.readAsDataURL(file);
})
}
const allReaders = Array.from(event.target.files).map(readFile)
Promise.all(allReaders)
.then(fileList => {
console.log(this.state.files)
this.setState({ files: fileList });
})
.catch(error => {
console.error(error)
});
}
Затем я сопоставляю массив файлов, чтобы добавить эти файлы в список ввода текста. Они также могут изменить порядок списка, а также изменить текст для каждого элемента списка.
После этого они смогут сохранять информацию списка в базе данных с помощью кнопки.
Реакция JS
save(event) {
event.preventDefault();
let files = this.state.files;
let data = files.map(( { name } , index) => ({ name, index : index }));
let request = new Request('http://localhost:3000/songs', {
method: 'POST',
headers: new Headers({ 'Content-Type': 'application/json' }),
body: JSON.stringify(data)
});
fetch(request)
.then((response) =>
response.json())
.then((data) => {
})
.catch((error) => {
console.log(error)
})
}
Node JS
*queries.js*
const addSong = (request, response) => {
const id = parseInt(request.params.id)
const { name, link, index } = request.body;
for (var i = 0; i < request.body.length; i++) {
pool.query('INSERT INTO songs (name, link, index) VALUES ($1, $2, $3) RETURNING *', [request.body[i].name, request.body[i].link, request.body[i].index], (error, results) => {
if (error) {
throw error
console.log(error)
} else {
console.log("Rows " + JSON.stringify(results.rows));
}
});
}
}
*index.js*
const app = express();
const db = require('./queries');
app.post('/songs', db.addSong)
Работает, но если я нажимаю сохранить дважды он сохраняет те же данные в базу данных. Я думаю, что я хочу иметь возможность не сохранять объект, если он содержит тот же индекс, что и другой объект.