错误：useForm必须在&；lt；表单&；>组件-电子中使用 [英] Error: useForm must be used inside of a <Form> component - Electron
本文介绍了错误：useForm必须在&；lt；表单&；>组件-电子中使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您所期待的： 我遵循了链接两个组件的升级指南，开始使用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;
环境
- reaction-admin版本：alpha.4
- 未出现该问题的最后一个版本(如果适用)：V2
- Reaction版本：^16.8
- 浏览器：电子 "电子"："^6.0.8"， "电子生成器"："^21.1.1"， "Electronic-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)
推荐答案
对于像我这样的人，在放弃之前尝试修复此问题并进行随机搜索，会发现此主题-对我而言，这也是一个解决问题，类似于上一个答案。
我有
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 resolution，从而导致
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之后，也解决了该问题。
这篇关于错误：useForm必须在&；lt；表单&；>组件-电子中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
