我正在使用 font-picker-react 包来使用 Google Font API 呈现字体。
每次从下拉列表中选择新字体时,我都想用它来更新字段值。
目前,在 useEffect Hook 中,“值”正确更新。但是,当控制台在组件主体中记录“值”时,这不会更新,我不确定为什么。
export function FontPickerInputField<T = any>({ field }: FontPickerSidebarProps<T>) {
const placeholderFont: string = 'Open Sans';
const [fontFamily, setFontFamily] = useState(placeholderFont);
let { value, name } = field;
const fontFormat: string = fontFamily.replace(/\s/g, '+');
const updatedFont = `https://fonts.googleapis.com/css?family=${fontFormat}:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap`;
const [googleFontLink, setGoogleFontLink] = useState(updatedFont);
useEffect(() => {
setGoogleFontLink(updatedFont);
value = googleFontLink;
}, [fontFamily]);
return (
<StyledContainer>
<FontPicker
apiKey="MY-API-KEY"
activeFontFamily={fontFamily}
onChange={({ family }) => setFontFamily(family)}
limit={100}
sort={'popularity'}
/>
</StyledContainer>
);
}
最佳答案
您需要使用useState
钩子(Hook)。 value
来自 prop,如果你想用状态变化来更新它,像这样初始化 -
const [currentValue, setCurrentValue] = useState(value); // initialize with the value from the props
当你想更新当前值时,现在在你的 use hook 中 -
useEffect(() => {
setGoogleFontLink(updatedFont);
setCurrentValue(googleFontLink);
}, [fontFamily]);
你可以看到 currentValue
也在正文中更新了。
关于javascript - React UseEffect Hook - 值在钩子(Hook)内更新但不在组件主体内,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59319947/