声明后状态为false

Question

我目前正试图实现一个简单的web应用程序与反应和流畅的ui。现在我正在做一个带有Coachmark的工具栏。但这些都不重要。我的函数组件使用React。并从布尔类型的属性初始化它。在此之后，无论该属性的值是多少，状态都是false。下面是相关的代码片段:

type HeadDataCommandBarProps = {
onSave: any,
onComment: any,
showCoachmark: boolean
};
const InvoiceHeadDataCommandBar: React.FunctionComponent<InvoiceHeadDataCommandBarProps> = ({ onSave, onComment, showCoachmark }) => {
console.log('showCoachmark', showCoachmark);
const [isCoachmarkVisible, setIsCoachmarkVisible] = React.useState(showCoachmark);
console.log('isCoachmarkVisible', isCoachmarkVisible);
const onDismissCoachmark = () => setIsCoachmarkVisible(false);
return (
<IndividualCommandBarButtonAsExample
onDismissCoachmark={onDismissCoachmark}
isCoachmarkVisible={isCoachmarkVisible}
onSave={onSave}
onComment={onComment}
/>
);
}
export default InvoiceHeadDataCommandBar;

日志输出:

showCoachmark true InvoiceHeadDataCommandBar.tsx:94:12
isCoachmarkVisible false InvoiceHeadDataCommandBar.tsx:96:10

谁能给我指个正确的方向?

Answer 1

而不是:

isCoachmarkVisible={showCoachmark}

我会这样做:

isCoachmarkVisible={isCoachmarkVisible}

初始状态是道具的值。然后用函数设置一个新状态。但是新状态是isCoachmarkVisible。