为什么我的点击按钮在我重新加载页面时上传喜欢的计数
Why my click button is uploading the count of likes when I reload the page
我的问题是我想制作一个喜欢、不喜欢、炉火等按钮,但我的问题是我计算的点击次数会将其上传到数据库,但我必须在之后重新加载它,这样它才会出现在客户端。
这是我的示例代码。
对于后端
router.route('/update/:id').post((req,res) => {
practice1.findById(req.params.id)
.then( practice_1 => {
practice_1.name = req.body.name
practice_1.number = req.body.number
practice_1.save()
.then(() => res.json('Sample Updated!'))
.catch(err => res.status(400).json('Error :' + err))
})
.catch()
})
router.route('/update/:id').put((req,res) => {
practice1.findByIdAndUpdate(req.params.id)
.then(practice_1 => {
practice_1.name = req.body.name
practice_1.number = req.body.number
practice_1.save()
.then(() => res.json('Sample Updated!'))
.catch(err => res.status(400).json('Error :' + err))
})
.catch(err => res.status(400).json('Error :' + err))
})
我确实尝试在 post() 中执行此操作,但它仍然有效..但它与 put() 做同样的事情,它只在我重新加载页面后更新..
这是前端的代码。
import axios from 'axios'
import React, { useEffect, useState } from 'react'
const Samples = props => (
<tr>
<th>{props.sample._id}</th>
<th>{props.sample.name}</th>
<th>{props.sample.number}</th>
<th>
<button onClick={e => props.addMore(props.sample._id,props.sample)}> Add number </button>
</th>
</tr>
)
function ListSample() {
const [samples,setSamples] = useState([])
// const [sampleadd,setSampleAdd] = useState(0)
useEffect(() => {
axios.get('http://localhost:1212/practice1')
.then(data => setSamples(data.data))
.catch(err => console.log(err))
},[])
const addMore = (id,samples) => {
samples.number += 1
axios.post('http://localhost:1212/practice1/update/'+id,{ name:samples.name , number: samples.number })
.then(res => console.log(res.data))
.catch(err => console.log(err))
axios.put('http://localhost:1212/practice1/update/'+id, { name: samples.name, number: samples.number} )
.then(res => console.log(res.data))
.catch(err => console.log(err))
}
const sampleDeclarations = () => {
return samples.map(currentsample => {
return <Samples
key={currentsample._id}
sample={currentsample}
addMore={ e => addMore(e,currentsample)}
></Samples>
})
}
return (
<div>
<h1> Sample List </h1>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{sampleDeclarations()}
</tbody>
</table>
</div>
)
}
export default ListSample
所以基本上我在 addMore()
部分所做的正如你所看到的,我示例添加 samples.number += 1
然后将其放入 or post..你可以注释掉 put 或 post axios..我已经试过了..但我基本上想自动上传我的点赞数而无需重新加载。
这张图基本上是这样的
是的,对命名感到抱歉,但不介意。我只想以正确的方法执行它。
由于这是状态挂钩,因此您必须使用 setSamples。在你做 samples.number += 1 之后,尝试做
setSamples({
...samples,
number = samples.number + 1
});
其中 ...samples 执行对象传播以获取原始样本的其余值,而您只是更改数字参数。此外,也许将 useState([]) 的内部从一个空数组更改为一个空对象 {},因为样本似乎是一个对象。
我的问题是我想制作一个喜欢、不喜欢、炉火等按钮,但我的问题是我计算的点击次数会将其上传到数据库,但我必须在之后重新加载它,这样它才会出现在客户端。
这是我的示例代码。
对于后端
router.route('/update/:id').post((req,res) => {
practice1.findById(req.params.id)
.then( practice_1 => {
practice_1.name = req.body.name
practice_1.number = req.body.number
practice_1.save()
.then(() => res.json('Sample Updated!'))
.catch(err => res.status(400).json('Error :' + err))
})
.catch()
})
router.route('/update/:id').put((req,res) => {
practice1.findByIdAndUpdate(req.params.id)
.then(practice_1 => {
practice_1.name = req.body.name
practice_1.number = req.body.number
practice_1.save()
.then(() => res.json('Sample Updated!'))
.catch(err => res.status(400).json('Error :' + err))
})
.catch(err => res.status(400).json('Error :' + err))
})
我确实尝试在 post() 中执行此操作,但它仍然有效..但它与 put() 做同样的事情,它只在我重新加载页面后更新.. 这是前端的代码。
import axios from 'axios'
import React, { useEffect, useState } from 'react'
const Samples = props => (
<tr>
<th>{props.sample._id}</th>
<th>{props.sample.name}</th>
<th>{props.sample.number}</th>
<th>
<button onClick={e => props.addMore(props.sample._id,props.sample)}> Add number </button>
</th>
</tr>
)
function ListSample() {
const [samples,setSamples] = useState([])
// const [sampleadd,setSampleAdd] = useState(0)
useEffect(() => {
axios.get('http://localhost:1212/practice1')
.then(data => setSamples(data.data))
.catch(err => console.log(err))
},[])
const addMore = (id,samples) => {
samples.number += 1
axios.post('http://localhost:1212/practice1/update/'+id,{ name:samples.name , number: samples.number })
.then(res => console.log(res.data))
.catch(err => console.log(err))
axios.put('http://localhost:1212/practice1/update/'+id, { name: samples.name, number: samples.number} )
.then(res => console.log(res.data))
.catch(err => console.log(err))
}
const sampleDeclarations = () => {
return samples.map(currentsample => {
return <Samples
key={currentsample._id}
sample={currentsample}
addMore={ e => addMore(e,currentsample)}
></Samples>
})
}
return (
<div>
<h1> Sample List </h1>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{sampleDeclarations()}
</tbody>
</table>
</div>
)
}
export default ListSample
所以基本上我在 addMore()
部分所做的正如你所看到的,我示例添加 samples.number += 1
然后将其放入 or post..你可以注释掉 put 或 post axios..我已经试过了..但我基本上想自动上传我的点赞数而无需重新加载。
这张图基本上是这样的
由于这是状态挂钩,因此您必须使用 setSamples。在你做 samples.number += 1 之后,尝试做
setSamples({
...samples,
number = samples.number + 1
});
其中 ...samples 执行对象传播以获取原始样本的其余值,而您只是更改数字参数。此外,也许将 useState([]) 的内部从一个空数组更改为一个空对象 {},因为样本似乎是一个对象。