您的期望： 我遵循了链接两个组件的升级指南，并开始使用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;
环境
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)
答案 0 :(得分：0)
我通过在我的JSON包中添加react-final-form来解决此问题。由于某种原因，webpack出现了与ra-core的对等依赖关系的问题。