嘿，我在编辑填充的“编辑代理表单”时遇到问题。我正在使用getDerivedStateFromProps（）生命周期方法，但是每次尝试对其进行完全填充后，我都会尝试编辑此错误：Uncaught TypeError：无法读取未定义的属性'setState'。我已经多次浏览了react文档，但是到目前为止我使用的所有方法都没有解决方案。请问我该如何解决？
import React, { Component } from 'react'
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import TextField from '../../commons/TextField.jsx';
import SubmitButton from '../../commons/SubmitButton.jsx';
import fetchSingleAgent from '../../../actions/getSingleAgentAction';
import updateAgentInput from '../../../middleware/updateAgentInput';
class EditAgentForm extends Component {
constructor(props) {
super(props);
this.state = {
id: this.props.singleAgent ? this.props.singleAgent._id: '',
phoneNumber: this.props.singleAgent ? this.props.singleAgent.phoneNumber: '',
password: this.props.singleAgent ? this.props.singleAgent.password: '',
fullname: this.props.singleAgent ? this.props.singleAgent.fullname: '',
address: this.props.singleAgent ? this.props.singleAgent.address: '',
bvn: this.props.singleAgent ? this.props.singleAgent.bvn: '',
email: this.props.singleAgent ? this.props.singleAgent.email: '',
age: this.props.singleAgent ? this.props.singleAgent.age: '',
meansOfId: this.props.singleAgent ? this.props.singleAgent.meansOfId: 'sample',
guarantorsFullName: this.props.singleAgent ? this.props.singleAgent.guarantorsFullName: '',
guarantorsPhonenumber: this.props.singleAgent ? this.props.singleAgent.guarantorsPhonenumber: '',
guarantorsAddress: this.props.singleAgent ? this.props.singleAgent.guarantorsAddress: '',
idNumber: this.props.singleAgent ? this.props.singleAgent.idNumber: '',
errors: {},
isLoading: false,
}
this.onEditAgent = this.onEditAgent.bind(this);
}
/**
*
* @param {*} nextProps
* @returns {*} - single master agent object
*/
static getDerivedStateFromProps(props, state) {
console.log('===>', props.singleAgent._id, state.id);
if (props.singleAgent._id == state.id) {
return null
}
return {
id: props.singleAgent._id,
phoneNumber: props.singleAgent.phoneNumber,
password: props.singleAgent.password,
fullname: props.singleAgent.fullname,
address: props.singleAgent.address,
bvn: props.singleAgent.bvn,
email: props.singleAgent.email,
age: props.singleAgent.age,
meansOfId: props.singleAgent.meansOfId,
guarantorsFullName: props.singleAgent.guarantorsFullName,
guarantorsPhonenumber: props.singleAgent.guarantorsPhonenumber,
guarantorsAddress: props.singleAgent.guarantorsAddress,
isNumber: props.singleAgent.isNumber,
};
}
/**
*
* @param {*} event
* @returns {*} - state
*/
onChange(event) {
this.setState({
[event.target.name]: event.target.value
});
}
/**
*
* @param {*} event
* @returns {*} - state
*/
onSubmit(event) {
event.preventDefault();
console.log('I got here 2')
if (this.isValid()) {
console.log('I got here')
this.setState({ errors: {}, isLoading: true });
}
}
onEditAgent(event) {
event.preventDefault();
this.setState({isLoading: true})
}
isValid() {
console.log('I got here 3')
const { errors, isValid } = updateAgentInput(this.state);
if (!isValid) {
this.setState({ errors });
}
return isValid;
}
render() {
const {
phoneNumber,
password,
fullname,
address,
bvn,
email,
age,
meansOfId,
guarantorsFullName,
guarantorsPhonenumber,
guarantorsAddress,
idNumber,
errors,
isLoading,
} = this.state;
const meansOfIdentificationList = ['Select', 'voters card','international passport','national id card','drivers license']
const editAgentForm = (
<div>
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading main-color-bg">
<h3 class="panel-title">Update Agents Form</h3>
</div>
<div class="panel-body">
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label>Fullname</label>
<TextField
error={errors.fullname}
onChange={this.onChange}
value={fullname || ''}
field="fullname"
type="text"
className="myfullname"
placeholder="Enter Fullname"
/>
</div>
<div class="form-group col-md-4">
<label>Phone Number</label>
<TextField
error={errors.phoneNumber}
onChange={this.onChange}
value={phoneNumber || ''}
field="phoneNumber"
type="text"
className="form-control"
placeholder="Enter Phone Number"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Email</label>
<TextField
error={errors.email}
onChange={this.onChange}
value={email || ''}
field="email"
type="email"
className="myemail"
placeholder="Enter Email"
/>
</div>
<div class="form-group col-md-4">
<label>Address</label>
<TextField
error={errors.address}
onChange={this.onChange}
value={address || ''}
field="address"
type="text"
className="myaddress"
placeholder="Enter Your Address"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Age</label>
<TextField
error={errors.age}
onChange={this.onChange}
value={age || ''}
field="age"
type="text"
className="myage"
placeholder="Enter Age"
/>
</div>
<div class="form-group col-md-4">
<label>BVN</label>
<TextField
error={errors.bvn}
onChange={this.onChange}
value={bvn || ''}
field="bvn"
type="password"
className="mybvn"
placeholder="Enter your BVN"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Password</label>
<TextField
error={errors.password}
onChange={this.onChange}
value={password || ''}
field="password"
type="text"
className="mypassword"
placeholder="Enter Your Password"
/>
</div>
<div class="form-group col-md-4">
<label>Guarantor Address</label>
<TextField
error={errors.guarantorsAddress}
onChange={this.onChange}
value={guarantorsAddress}
field="guarantorsAddress"
type="text"
className="myguarantorAddress"
placeholder="Enter Guarantor Address"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Guarantor Fullname</label>
<TextField
error={errors.guarantorsFullName}
onChange={this.onChange}
value={guarantorsFullName}
field="guarantorsFullName"
type="text"
className="myguarantorFullname"
placeholder="Enter Guarantor Fullname"
/>
</div>
<div class="form-group col-md-4">
<label>Guarantor Phone Number</label>
<TextField
error={errors.guarantorsPhonenumber}
onChange={this.onChange}
value={guarantorsPhonenumber}
field="guarantorsPhonenumber"
type="text"
className="myguarantorPhonenumber"
placeholder="Enter Guarantor Phonenumber"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Identification Number</label>
<TextField
error={errors.idNumber}
onChange={this.onChange}
value={idNumber}
field="idNumber"
type="text"
className="myidNumber"
placeholder="Enter Identification Number"
/>
</div>
<div class="form-group col-md-4">
<label htmlFor="email">Select Means of Identification </label>
<select
className="form-control select2"
onChange={this.onChange}
name="meansOfId"
value={meansOfId}
>
{
meansOfIdentificationList.map(idMeans => (
<option value={idMeans}>
{idMeans}
</option>
))
}
</select>
</div>
</div>
</form>
<br />
</div>
<div class="form-group text-center">
<SubmitButton
type="submit"
className="mybutton"
onClick={this.onSubmit}
label="Update Agent"
/>
</div>
</div>
</div>
</div>
)
return <div>{editAgentForm}</div>
}
}
EditAgentForm.propTypes = {
singleAgent: PropTypes.shape({}).isRequired,
};
const mapStateToProps = state => {
return {
singleAgent: state.singleAgentRequests.singleAgent
};
};
export default connect(mapStateToProps, { fetchSingleAgent })(EditAgentForm);
“我希望填充的表单输出会发生变化，但是每次尝试对其进行编辑时，都会出现此错误：Uncaught TypeError：无法读取未定义的属性'setState'。”
答案 0 :(得分：0)
在构造函数中，您需要绑定所有函数（包含this参数）。由于未绑定这些功能，因此会出现未定义的错误setState。因为this参数未定义。
答案 1 :(得分：0)
将您的方法更改为箭头函数，因此我们可以使用onSubmit() {}来代替onSubmit = () => {}，因此我们不必在构造函数中显式绑定this。
之所以可行，是因为箭头函数按词法绑定了它们的上下文（在代码中出现的位置），因此实际上是指原始上下文，即我们的类实例。