【发布时间】:2020-01-16 21:21:38
【问题描述】:
我正在使用输入来允许用户从他们的计算机中选择文件并将其添加到列表中。我通过使用 promise 加载文件并创建一组 promise 并将其添加到我的状态来做到这一点
反应 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)
})
}
节点 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)
它可以工作,但如果我单击保存两次,它会将相同的数据保存到数据库中。我想如果它包含与另一个对象相同的索引,我想要做的是不保存该对象。
【问题讨论】:
标签: sql node.js reactjs postgresql sql-insert