为什么react-font-picker给出错误“错误：无法更新活动字体：“Fira Sans”不在字体列表中”？

Question

我在我的项目中使用字体选择器，如下所示。

<FontPicker
                          apiKey={process.env.REACT_APP_GOOGLE_API_KEY}
                          activeFontFamily={activeFontFamilyMobile}
                          onChange={(nextFont) =>
                            setActiveFontFamilyMobile(nextFont.family)
                          }
                        />

已经保存的字体存储在后端，我在使用中像这样获取和设置效果：

            setActiveFontFamilyMobile(response.data.font_family);

默认情况下，状态是这样的：

  const [activeFontFamilyMobile, setActiveFontFamilyMobile] = React.useState("Raleway");

所以问题是，当页面第一次加载时，保存的font_family来自后端，存储在activeFontFamilyMobile中。并且在fontPicker的参数中，应该通过activeFontFamily={activeFontFamilyMobile}来显示。但它给出了这样的错误：

但是，如果我对代码进行一些更改并导致重新渲染，它就会开始工作。所以当页面第一次加载时它不起作用。可能是什么问题？

Answer 1

您应该在 useState 中设置当前的默认字体并使用 setTimeout()

    const [fontPrimary, setFontPrimary] = useState("Plus Jakarta Sans");   
useEffect(() => {
        setTimeout(() => {
          setFontPrimary(settings?.fontFamily);
        },10)   }, [settings]);

在组件中

<FontPicker
            apiKey={API_KEY_FONT_GOOGLE}
            activeFontFamily={fontPrimary}
            onChange={(nextFont) => handleSetFontSize(nextFont.family)}
          />