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

【问题标题】：Data coming from frontend duplicates in backend twice React.js Node.js来自前端的数据在后端重复两次 React.js Node.js
【发布时间】：2021-06-16 03:52:26
【问题描述】：

我按下 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});
}

【问题讨论】：

您是否启用了StrictMode？
displayMessage() 在每次渲染时都会被调用。如果您的onClick 处理程序或其他任何更新状态（或其他任何触发重新渲染），displayMessage() 将被调用。

标签： javascript node.js reactjs rest

【解决方案1】：

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

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

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

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

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

Why is my onClick being called on render? - React.js

【讨论】：

我认为你是对的。我更新了解决方案。你能检查一下是不是你的意思吗？谢谢。

【解决方案2】：

如果您启用了StrictMode，这可能是双 API 调用的原因。在开发模式下，它causes components to render twice 帮助发现意外的副作用。此外，它在第二次渲染时silences console methods。

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

【讨论】：