"Автономная форма реакции" не работает

Question

Я создал приложение для реагирования с помощью createReactApp .. затем добавил автономную форму реакции с помощью пряжи add response-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",

},

Затем я просто скопировал вставленный код со следующего URL-адреса в индекс. js https://codesandbox.io/s/jpz56ymo63?file= / src / index. js: 0-729

При загрузке localhost: 3000 выдается следующая ошибка:

Uncaught TypeError: Невозможно прочитать свойство errorNotificationFun c 'неопределенного

Пожалуйста, обратитесь к скриншоту. введите описание изображения здесь

До того, как я сделал то же самое с моим существующим веб-сайтом, он не работал, получил ту же ошибку, поэтому я попытался использовать образец с помощью createReactApp. Я также установил "React-Toastify".

Answer 1

Короткий ответ

Глядя на последнюю версию, теперь требуется свойство темы в FormThemeProvider, поэтому для решения вашей проблемы вы должны передать что-то для свойства темы

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

Длинный ответ

Похоже, код изменился по сравнению с версией, которую вы использовали последней. Вы проделали работу, чтобы определить, какая версия является проблемой (0.9.4 - 0.10.0). Глядя на историю коммитов на репо , есть что-то об объекте темы в коммите для 0.10.0.

Looking at that указывается c изменение это Похоже, что 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>
  )
}

Старый код проверял входящую опору темы и, если бы она была нулевой, просто возвращала бы тему по умолчанию. Новый код требует, чтобы тема была чем-то другим, кроме undefined.

Если посмотреть на последнюю версию, это все еще так, поэтому для решения вашей проблемы вы должны передать что-то для свойства темы в FormThemeProvider.