为什么我的点击按钮在我重新加载页面时上传喜欢的计数

Question

我的问题是我想制作一个喜欢、不喜欢、炉火等按钮，但我的问题是我计算的点击次数会将其上传到数据库，但我必须在之后重新加载它，这样它才会出现在客户端。

这是我的示例代码。

对于后端

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..我已经试过了..但我基本上想自动上传我的点赞数而无需重新加载。

这张图基本上是这样的是的，对命名感到抱歉，但不介意。我只想以正确的方法执行它。

Answer 1

由于这是状态挂钩，因此您必须使用 setSamples。在你做 samples.number += 1 之后，尝试做

setSamples({
...samples,
number = samples.number + 1
});

其中 ...samples 执行对象传播以获取原始样本的其余值，而您只是更改数字参数。此外，也许将 useState([]) 的内部从一个空数组更改为一个空对象 {}，因为样本似乎是一个对象。

为什么我的点击按钮在我重新加载页面时上传喜欢的计数

Why my click button is uploading the count of likes when I reload the page

reactjs

mongodb

express

mongoose