我的 React 按钮每次点击都会记录两次

Question

我的日志的图像

每当我单击子组件中的按钮时，每次单击都会记录两次。我通过简单地在我的子组件渲染函数中添加一个控制台.log(this.props)来发现这一点。这是下面的代码

父组件

import React, { Component } from "react";
import Counter from "./counter";
class Counters extends Component {
constructor(props) {
super(props);
this.state = {
value: 0,
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({ value: this.state.value + 1 });
}
render() {
return (
<div>
<Counter onClick={this.handleClick} value={this.state.value} />
</div>
);
}
}
export default Counters;

子组件

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
class Counter extends Component {
render() {
console.log(this.props);
return (
<div className="container">
<span className="badge badge-secondary">{this.props.value}</span>
<button
onClick={this.props.onClick}
type="button"
className="btn btn-primary m-2"
>
Increment
</button>
</div>
);
}
}
export default Counter;

Answer 1

这是因为你的应用包装在<React.StrictMode>中，这可能会导致多次调用呈现函数或功能组件以进行调试。