electron - 错误: useForm must be used inside of a component - Electron

Question

您的期望:
我遵循了链接两个组件的升级指南，并开始使用const form = useForm()而不是调度。所做的更改在Chrome浏览器中有效，但是当我在Electron中打开时，出现错误消息:

Error: useForm must be used inside of a <Form> component

我不知道如何从这里开始，奇怪的是它可以在 Chrome 中工作，但不能在 Electron 中工作，因此任何帮助将不胜感激。

import React, { Component, Fragment } from 'react';
import LocationPickerComponent from '../helper/LocationPickerHooks';
import {FormDataConsumer} from 'react-admin';

const FactoryEdit = ({ classes, ...props }) => (
  <Edit  {...props}>
 <TabbedForm>
  <FormDataConsumer>
          {formDataProps => <LocationPicker {...formDataProps} />}
  </FormDataConsumer>
</TabbedForm>
</Edit>
)

这是位置选择器的自定义组件

import React, { Fragment, Form} from 'react';
import { TextInput } from 'react-admin';
import LocationPicker from 'react-location-picker';
import PlacesAutocomplete, {
  geocodeByAddress,
  getLatLng
} from 'react-places-autocomplete';
import PropTypes from 'prop-types';
import { useForm } from 'react-final-form';

const defaultPosition = {
  lat: 31.218001175963728,
  lng: 121.44911770820613
};

const LocationPickerComponent = ({ formData, classes, ...rest }) => {
  const form = useForm();
const [address, setaddress] = React.useState('');
const [position, setPosition] = React.useState({ 
  lat: formData.Label_Latitude
  ? formData.Label_Latitude
  : defaultPosition.lat,
lng: formData.Label_Longitude
  ? formData.Label_Longitude
  : defaultPosition.lng});

function handleLocationChange ({position, address })  {


form.change('Label_Longitude', position.lng);
form.change('Label_Latitude', position.lat);
form.change('FullAddress', address);

}


function handleChange(address) {
  setaddress(address)
  };



  function handleSelect(address) {
    geocodeByAddress(address)
      .then(results => getLatLng(results[0]))
      .then(latLng => {
        console.log(latLng)
        setPosition(latLng);
      })
      .catch(error => console.error('Error', error));
  };



return (
  <Fragment>

    <TextInput source="Label_Longitude" {...rest} disabled />
    <TextInput source="Label_Latitude" {...rest} disabled />
    <br />
    <TextInput source="FullAddress" style={{ width: '60%' }} {...rest} />

  <div>
  <div>
    <PlacesAutocomplete
      value={address}
      onChange={handleChange}
      onSelect={handleSelect}
      {...rest} 
    >
      {({
        getInputProps,
        suggestions,
        getSuggestionItemProps,
        loading
      }) => (
        <div>
          <input
            {...getInputProps({
              placeholder: 'Search Places ...',
              className: 'location-search-input'
            })}
          />
          <div className="autocomplete-dropdown-container">
            {loading && <div>Loading...</div>}
            {suggestions.map(suggestion => {
              const className = suggestion.active
                ? 'suggestion-item--active'
                : 'suggestion-item';
              // inline style for demonstration purpose
              const style = suggestion.active
                ? { backgroundColor: '#fafafa', cursor: 'pointer' }
                : { backgroundColor: '#ffffff', cursor: 'pointer' };
              return (
                <div
                  {...getSuggestionItemProps(suggestion, {
                    className,
                    style
                  })}
                >
                  <span>{suggestion.description}</span>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </PlacesAutocomplete>

    <LocationPicker
      containerElement={<div style={{ height: '100%' }} />}
      mapElement={<div style={{ height: '400px' }} />}
      defaultPosition={position}
      onChange={handleLocationChange}
      {...rest} 
    />
  </div>
</div>
</Fragment> 
);};
LocationPickerComponent.defaultProps = {
classes: {},
formData: {}
};
LocationPickerComponent.propTypes = {
classes: PropTypes.shape({
  root: PropTypes.object
}),
formData: PropTypes.shape({
  root: PropTypes.object
})
};

export default LocationPickerComponent;

环境

React-admin版本:alpha.4

没有出现该问题的最新版本(如果适用):v2

React版本:^ 16.8

浏览器:Electron
“electron”:“^ 6.0.8”，
“electron-builder”:“^ 21.1.1”，
“electron-devtools-installer”:“^ 2.2.4”，
“Electron 重建”:“^ 1.8.5”，

堆栈跟踪(如果发生JS错误):

    in LocationPickerComponent (at FactoryEdit.jsx:105)
    in Component (created by FormDataConsumer)
    in FormDataConsumer (at FactoryEdit.jsx:104)
    in div (created by FormInput)
    in FormInput (created by FormTab)
    in span (created by FormTab)
    in FormTab (created by Context.Consumer)
    in translate(FormTab) (at FactoryEdit.jsx:39)
    in Route (created by Component)
    in div (created by Component)
    in form (created by Component)
    in Component (created by ReactFinalForm)
    in ReactFinalForm (created by TabbedForm)
    in TabbedForm (created by Context.Consumer)
    in withRouter(TabbedForm) (created by FactoryEdit)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
    in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
    in WithStyles(ForwardRef(Card)) (created by Component)
    in div (created by Component)
    in div (created by Component)
    in Component (created by Edit)
    in Edit (at FactoryEdit.jsx:37)
    in FactoryEdit (created by WithStyles(FactoryEdit))
    in WithStyles(FactoryEdit) (created by WithPermissions)
    in WithPermissions (created by Context.Consumer)
    in Route (created by ResourceRoutes)
    in Switch (created by ResourceRoutes)
    in ResourceRoutes (created by Resource)
    in Resource
    in Route (created by RoutesWithLayout)
    in Switch (created by RoutesWithLayout)
    in RoutesWithLayout (created by Context.Consumer)
    in div (created by Layout)
    in main (created by Layout)
    in div (created by Layout)
    in div (created by Layout)
    in Layout (created by WithStyles(Layout))
    in WithStyles(Layout) (created by Context.Consumer)
    in withRouter(WithStyles(Layout)) (created by ConnectFunction)
    in ConnectFunction (created by LayoutWithTheme)
    in ThemeProvider (created by LayoutWithTheme)
    in LayoutWithTheme (at Layout.jsx:10)
    in CustomLayout (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in Route (created by CoreAdminRouter)
    in Switch (created by CoreAdminRouter)
    in div (created by CoreAdminRouter)
    in CoreAdminRouter (created by ConnectFunction)
    in ConnectFunction
    in ConnectFunction (created by Context.Consumer)
    in Route (created by CoreAdmin)
    in Switch (created by CoreAdmin)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by ConnectFunction)
    in ConnectFunction (created by CoreAdmin)
    in TranslationProviderView (created by ConnectFunction)
    in ConnectFunction (created by CoreAdmin)
    in Provider (created by CoreAdmin)
    in CoreAdmin (at App.jsx:866)
    in App (at src/index.jsx:19)

Answer 1

我通过将react-final-form添加到我的包JSON中来解决此问题。出于某种原因，webpack出现了与ra-core的对等依赖关系的问题。