错误：必须在组件内部使用 <Form> - 电子

Question

你所期待的：我按照升级指南链接两个组件，开始使用const form = useForm((而不是调度。该更改适用于Chrome浏览器，但是当我在Electron中打开时，出现错误：

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

我不确定如何从这里开始，奇怪的是它在铬中工作而不是电子，所以任何帮助将不胜感激。

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;

环境

• 反应管理员版本：alpha.4
• 未出现问题的最新版本(如果适用(：v2
• 反应版本： ^16.8
• 浏览器： 电子 "电子"： "^6.0.8"， "电子生成器"： "^21.1.1"， "electron-devtools-installer"： "^2.2.4"， "电子重建"： "^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

我通过将反应最终形式添加到我的包 JSON 来解决这个问题。出于某种原因，webpack 有一个问题，它是 ra-core 的对等依赖。

Answer 2

对于像我这样的人，试图解决这个问题并在放弃之前进行随机搜索，这揭示了这个线程 - 对我来说，这也是一个解决问题，类似于之前的答案。

我有

yarn list --pattern react-final-form
yarn list v1.22.15
├─ react-admin@3.18.2
│  └─ react-final-form@6.5.3
├─ react-final-form-arrays@3.1.3
└─ react-final-form@6.5.7
✨  Done in 0.83s.

并且需要将"react-final-form": "^6.5.0"定义为纱线分辨率，从而导致

yarn list --pattern react-final-form
yarn list v1.22.15
├─ react-final-form-arrays@3.1.3
└─ react-final-form@6.5.7
✨  Done in 0.83s.

yarn install之后，这也解决了问题。