Javascript "；“独立反应表”；它不起作用了

我已使用createReactApp创建了一个react应用程序。。然后使用纱线添加反应独立窗体添加反应独立窗体。它在package.json文件中添加了依赖项，如下所示

"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"react-standalone-form": "^1.1.0"
"react-toastify": "^6.0.8",

},

然后我只是从index.js中的以下URL复制粘贴代码

加载localhost:3000时，它抛出以下错误

未捕获的TypeError:无法读取未定义的属性“errorNotificationFunc”

请参考截图。

在我对我现有的网站做同样的操作之前，它不工作，出现了相同的错误，所以我尝试使用createReactApp处理示例。我也安装了“React Toastify”。

简短回答 查看最新版本，FormThemeProvider上的主题道具现在是必需的，因此要解决您的问题，您必须为主题道具传递一些内容

 <FormThemeProvider theme={{}}>
    <div className="my-app">
      <BasicFormExample />
    </div>
  </FormThemeProvider>

长话短说 看起来代码与上次使用的版本不同。您已经完成了确定问题出在哪个版本（0.9.4-0.10.0）的工作。查看上的提交历史记录，在commit for 0.10.0中有一个主题对象

现在看来，FormThemeProvider不再使用默认主题，而是希望传入一个主题

提交中的旧代码

const FormThemeProvider = ({ theme, children }) =>
  <ThemeProvider theme={theme
    ? {
      sizes: { ...defautTheme.sizes, ...theme.sizes },
      colors: { ...defautTheme.colors, ...theme.colors },
      typography: { ...defautTheme.typography, ...theme.typography },
      breakpoints: { ...defautTheme.breakpoints, ...theme.breakpoints },
      textLabels: { ...defautTheme.textLabels, ...theme.textLabels },
      customValidationFunction: theme.customValidationFunction,
    }
    : defautTheme
  }>
    <React.Fragment>
      {children}
      <ToastContainer hideProgressBar autoClose={5000} />
    </React.Fragment>
  </ThemeProvider> 

const FormThemeProvider=（{theme，children}）=>
{儿童}

提交中的新代码

const FormThemeProvider = ({ theme, children }) => {
  return (
    <ThemeProvider theme={outerTheme => {
      if (outerTheme) {
        setIsRoot(true)
      }
      const parentTheme = outerTheme || defautTheme
      const currentTheme = {
        sizes: { ...parentTheme.sizes, ...theme.sizes },
        colors: { ...parentTheme.colors, ...theme.colors },
        typography: { ...parentTheme.typography, ...theme.typography },
        breakpoints: { ...parentTheme.breakpoints, ...theme.breakpoints },
        textLabels: { ...parentTheme.textLabels, ...theme.textLabels },
        ...parentTheme.customValidationFunction,
        ...theme.customValidationFunction,
      }
      return currentTheme
    }}>
      <React.Fragment>
        {children}
        <ToastContainer hideProgressBar autoClose={5000} />
      </React.Fragment>
    </ThemeProvider>
  )
}

const FormThemeProvider=（{theme，children}）=>{
返回(
{
if（最外层）{
setIsRoot（真）
}
常量parentTheme=outerTheme | | defautTheme
const currentTheme={
大小：{…parentTheme.size，…theme.size}，
颜色：{…parentTheme.colors，…theme.colors}，
排版：{…父主题.排版，…主题.排版}，
断点：{…parentTheme.breakpoints，…theme.breakpoints}，
textLabels:{…parentTheme.textLabels，…theme.textLabels}，
…parentTheme.customValidationFunction，
…theme.customValidationFunction，
}
返回当前主题
}}>
{儿童}
)
}

旧代码测试传入的主题道具，如果它为null，则只返回默认主题。新代码要求主题不是未定义的

---

查看最新版本，情况仍然如此，因此要解决您的问题，您必须在FormThemeProvider上为主题道具传递一些信息。

当我尝试使用旧版本“react standalone form”时，它起作用了：“0.2.0”版本从0.2.0到0.9.4起作用。。之后，在打印机中抛出错误