时间戳

首页 > 解决方案 > “react-standalone-form”不起作用

javascript - “react-standalone-form”不起作用

问题描述

我使用 createReactApp 创建了一个反应应用程序。然后使用 yarn add react-standalone-form 添加了 react-standalone-form。它在 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 复制粘贴代码 https://codesandbox.io/s/jpz56ymo63?file=/src/index.js:0-729

加载 localhost:3000 时会引发以下错误

未捕获的类型错误：无法读取未定义的属性“errorNotificationFunc”

请参考截图。在此处输入图像描述 在此处输入图像描述

在我对现有网站执行相同操作之前，它无法正常工作，出现相同的错误，因此我尝试使用 createReactApp 进行示例。我也安装了“React-Toastify”。

标签： javascriptreactjsforms

解决方案

简答

查看最新版本，现在需要 FormThemeProvider 上的主题道具，因此要解决您的问题，您必须为主题道具传递一些东西

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

长答案

看起来代码已从您上次使用的版本更改。您已经完成了确定问题所在版本的工作（0.9.4 - 0.10.0）。查看repo上的提交历史记录，有一些关于 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 }) => {
  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>
  )
}

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

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

推荐阅读