来自前端的数据在后端重复两次 React.js Node.js

Question

我按下 onClick 按钮，它将数据（时间和 ID）发送到后端。

问题是：后端接收数据两次而不是一次。 req.body 打印数据两次。 见底部。

有谁知道我做错了什么？ 当我 console.log 发布请求时，它只打印一次。 所以，我认为问题出在代码的某个地方。

 const Shift = (props) => {
    const [time, setTime] = useState();
    const [inOut, setInOut] = useState('');
    
const getTime = (val) =>{
    setTime(new Date().toLocaleString());
    setInOut(val);
}

const displayMessage = () => {
    switch(inOut) {
        case 'in':
            sendClockIn();
            return  <Card.Text>
                Time: {time}<br/>You have clocked in ! <br/> Have a good working day!
            </Card.Text>;
        case 'out':
            // sendClockOut();
            return <Card.Text>
                Time: {time}<br/>You have clocked out ! <br/>Enjoy the rest of the day!
            </Card.Text>;
        default:
            return <Card.Text>
                Choose one of the 2 options from above.
            </Card.Text>;
    }
}

const sendClockIn = async () => {
    let id = props.Id;
    let clock = time;
    await ApiPostgres.dataSendClockIn({id, clock});
}

return (
    <div>
        <Card style={{ width: '25rem' }}>
            <Card.Header>
                <Button variant="primary"  onClick={() => getTime('in')}>Clock In</Button>
            </Card.Header>
            <Card.Body>
                {displayMessage()}
            </Card.Body>
        </Card>
    </div>
);
};
export default Shift;

后端：

  console.log(req.body) 

给我重复

{ id: 1, clock: '1/11/1111, 1:11:11 PM' } 
{ id: 1, clock: '1/11/1111, 1:11:11 PM' } 

---

解决方案：

我从 displayMessage() 中删除了 sendClockIn()。 然后，我在 getTime(); 中做了第二个 switch 语句。 然后，在 sendClockIn() 中，我创建了另一个来存储当前时间。 它可以正常工作。

有谁知道有什么区别？ - 是因为 displayMessage() 在加载时呈现，然后是 onClick？

const getTime = (e, val) =>{
    e.preventDefault();
    setTime(new Date().toLocaleString());
    setInOut(val);
    switch('in') {
        case 'in':
            sendClockIn();
            break;
        default:
            break;
    }
}

const sendClockIn = async () => {
    let id = props.Id;
    let clock = new Date().toLocaleString();
    await ApiPostgres.dataSendClockIn({id, clock});
}

Answer 1

不幸的是，我还不能发表评论，所以我会发帖。 但我想说这可能与 react 如何处理数据更改检测有关。

当您初始化 setTime 变量时，它可能会触发更改检测并呈现视图（因此调用 displayMessage）。 然后在渲染视图时调用 getTime('in')，它会进行另一个渲染并因此再次调用 displayMessage。

所以这样会导致2个请求。 但这是我的一个假设。

因此，为了测试这个假设是否正确，我将删除 getTime(in) 并查看是否只发出一个请求。

如果是，那么您的问题与下面链接的问题有关。

为什么我的 onClick 在渲染时被调用？ - React.js

Answer 2

如果您启用了StrictMode ，这可能是导致两次 API 调用的原因。 在开发模式下，它会导致组件渲染两次以帮助发现意外的副作用。 此外，它会在第二次渲染时使console方法静音。

您应该将用于发出 API 请求的 function 调用放在useEffect()挂钩中。