这通常是由于使用了Functional Component而不是Class Component导致的。Functional Component只有在每次props更新时才会重新渲染,而Class Component在状态更新时会重新渲染。因此,将Button组件从Functional Component改为Class Component即可解决此问题。
示例代码:
Functional Component:
import React, { useState } from 'react';
import { Button } from 'antd';
const MyButton = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1); // 第一次点击不会重新渲染组件
console.log(count);
};
return (
)
};
Class Component:
import React from 'react';
import { Button } from 'antd';
export default class MyButton extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
handleClick = () => {
this.setState({ count: this.state.count + 1 }); // 点击后重新渲染组件
console.log(this.state.count);
}
render() {
return (
);
}
}