React UseEffect Hook - 值在鈎子內更新，但不在組件主體內更新

Question

我正在使用 font-picker-react 包來使用 Google Font API 呈現字體。
每次從下拉列表中選擇新字體時，我想用它來更新字段值。
目前，在 useEffect 鈎子中，“值”正確更新。 但是，當控制台在組件主體中記錄“值”時，這不會更新，我不確定為什么。

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>
    );
}

Answer 1

您需要使用useState鈎子。 value來自道具，如果你想用狀態改變來更新它，初始化像 -

const [currentValue, setCurrentValue] = useState(value); // initialize with the value from the props

現在在您想要更新當前值時使用鈎子 -

useEffect(() => {
        setGoogleFontLink(updatedFont);
        setCurrentValue(googleFontLink);
    }, [fontFamily]);

您可以看到然后currentValue也在 body 中更新。