如何解决如果处于编辑模式，请从Formik中设置initialVariables
我正在使用Formik验证某些数据。当它应该创建新实体时，它工作正常，但是当我要编辑实体时会出现问题。
必须从状态（this.state.edit === true）激活编辑模式，并且实体的数据也存储在状态上，例如this.state.name在那里具有字符串值。 / p>
我在渲染中放置了一个控制台日志，问题是该日志被打印了几次，第一次是在this.sate.name上使用空字符串，而this.state.edit的值为false。下一次打印正确，此编辑为true并且名称包含一个值。
代码如下：
import pandas as pd
from scipy.spatial.distance import pdist,squareform
# Create the example dataframe
events = {'id': ['N1','N2','N3','N4','N5'],'event_one': ['aaa','bbb','ccc','aaa','aaa'],'event_two': ['abc','abc','def','abc'],'event_three': ['xyz','uvw','xyz','zzz']}
df = pd.DataFrame(events,columns=['id','event_one','event_two','event_three'])
# Create an adjacency matrix by comparing event_one using pdist
index_ndarray = df['id'].values
event_one_series = df['event_one']
dm = pdist(event_one_series[:,None],lambda u,v: 1 if u == v else 0)
event_one_matrix_df = pd.DataFrame(
squareform(dm),dtype='str',index=index_ndarray,columns=index_ndarray)
event_one_matrix_df
N1 N2 N3 N4 N5
N1 0.0 0.0 0.0 1.0 1.0
N2 0.0 0.0 0.0 0.0 0.0
N3 0.0 0.0 0.0 0.0 0.0
N4 1.0 0.0 0.0 0.0 1.0
N5 1.0 0.0 0.0 1.0 0.0
我把整个文件放在这里有更多的上下文。是否可以使用this.state.name中的值设置import React from 'react';
import { Redirect } from 'react-router-dom';
import { Formik,Form,Field } from 'formik';
import { Input,Button,Label,Grid } from 'semantic-ui-react';
import { connect } from 'react-redux';
import * as Yup from 'yup';
import { Creators } from '../../../actions';
class CreateCompanyForm extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
name: '',redirectCreate: false,redirectEdit: false,edit: false,};
}
componentDidMount() {
const {
getCompany,getCompanies,location: { pathname },} = this.props;
getCompanies({
name: '',});
if (pathname.substring(11) !== 'create') {
getCompany(pathname.substring(16));
this.setState({
edit: true,});
this.setState({
name: this.props.company.name,});
}
}
handleSubmitCreate = e => {
e.preventDefault();
const { createCompany,getCompanies } = this.props;
createCompany(this.state);
this.setState({ redirectCreate: true });
getCompanies(this.props.query);
};
handleSubmit = values => {
const { createCompany,getCompanies } = this.props;
createCompany(values);
this.setState({ redirectCreate: true });
getCompanies(this.props.query);
};
handleSubmitEdit = e => {
e.preventDefault();
const { name } = this.state;
const { updateCompany } = this.props;
updateCompany(this.props.company._id,{
name,});
this.setState({ redirectEdit: true });
};
render() {
let title = 'Create company';
let buttonName = 'Create';
let submit = this.handleSubmitCreate;
const { redirectCreate,redirectEdit } = this.state;
if (redirectCreate) {
return <Redirect to="/companies" />;
}
if (redirectEdit) {
return <Redirect to={`/companies/${this.props.company._id}`} />;
}
if (this.state.edit) {
title = 'Edit company';
buttonName = 'Edit';
submit = this.handleSubmitEdit;
}
console.log('state: ',this.state); // first time it is empty,next times it has data
let initialValues = {};
if (this.state.edit) {
initialValues = {
name: this.state.name,};
} else {
initialValues = {
name: '',};
}
const validationSchema = Yup.object({
name: Yup.string().required('This field is required'),});
return (
<>
<Button type="submit" form="amazing">
create company
</Button>
<Formik
htmlFor="amazing"
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={values => this.handleSubmit(values)}>
{({ values,errors,touched,setValues,setFieldValue }) => (
<Form id="amazing">
<Grid>
<Grid.Column>
<Label>Company name</Label>
<Field name="name" as={Input} placeholder="write a name" />
<div>{touched.name && errors.name ? errors.name : null}</div>
</Grid.Column>
</Grid>
<Button type="submit" floated="right" form="amazing">
{buttonName} company
</Button>
</Form>
)}
</Formik>
</>
);
}
}
const mapStatetoProps = state => ({
companies: state.companies.companies,company: state.companies.selectedCompany,query: state.companies.query,});
const mapdispatchToProps = {
getCompanies: Creators.getCompaniesRequest,createCompany: Creators.createCompanyRequest,getCompany: Creators.getCompanyRequest,updateCompany: Creators.updateCompanyRequest,};
export default connect(mapStatetoProps,mapdispatchToProps)(CreateCompanyForm);
的initialValue并将其放在输入字段中？
解决方法
默认情况下，如果初始值更改，Formik不会重新渲染。您可以将enableReinitialize属性传递给Formik组件以允许它。
正如您在评论中所说，它第一次渲染时就没有数据，因此它会使用空值初始化Formik。使用该道具，如果初始值更改，它应该重新渲染。
https://formik.org/docs/api/formik#enablereinitialize-boolean
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。