来自前端的数据在后端重复了两次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((中做了一个seecond switch语句；然后，在sendClockIn((中，我创建了另一个来存储当前时间。它正常工作。

有人知道有什么区别吗？-是因为displayMessage((在加载时渲染，然后在单击时渲染吗？

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请求的函数调用放在useEffect()钩子中。