【发布时间】：2021-08-19 17:03:43
【问题描述】：
我有一个从上述组件获取道具的类组件。
在类组件上，我使用该道具更新本地状态，然后将状态内的值用于render()。
但是发生了一些非常奇怪的事情，当我调试 state\props 变量时，似乎类组件没有得到 props（未定义）。
这是发送道具的类：
const EditInstitute = props => {
const { id } = props.match.params;
const [institute, setInstitute] = useState([])
useEffect(() => { //act like componentDidMount
getInstitutesById({id}).then((response) => {
setInstitute(response)
})
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
{/* Render Breadcrumbs */}
<Breadcrumbs title="StudentTracker" breadcrumbItem="ניהול מוסדות"/>
<Row>
<Col lg="12">
<Card>
<CardBody>
{
(institute.object !== null)
? (<InstituteForm institute={institute.object} />)
: (<Alert color="danger">{institute.errorName}</Alert>)
}
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
)
}
export default EditInstitute
InstituteForm 获取 props 的组件：
class InstituteForm extends React.Component {
state = {
id: (this.props.institute ? this.props.institute.id : ''),
name: (this.props.institute ? this.props.institute.name : ''),
contactName: (this.props.institute ? this.props.institute.contactName : ''),
phoneNumber: (this.props.institute ? this.props.institute.phoneNumber : ''),
city: (this.props.institute ? this.props.institute.city : ''),
street: (this.props.institute ? this.props.institute.street : ''),
number: (this.props.institute ? this.props.institute.number : ''),
deleted: (this.props.institute ? this.props.institute.deleted : ''),
}
render() {
console.log(this.state)
return (
<React.Fragment>
<CardTitle className="h4">עריכת המוסד</CardTitle>
<AvForm>
<Row className="mb-3">
<label
htmlFor="example-text-input"
className="col-md-2 col-form-label"
>
מזהה המוסד
</label>
<div className="col-md-10">
<AvField
name="id"
placeholder="מזהה"
type="text"
className="form-control"
disabled={true}
value={this.state.id}
/>
</div>
</Row>
<Row className="mb-3">
<label
htmlFor="example-text-input"
className="col-md-2 col-form-label"
>
שם המוסד
</label>
<div className="col-md-10">
<AvField
name="name"
placeholder="שם המוסד"
type="text"
errorMessage="ערך חובה"
className="form-control"
validate={{required: {value: true}}}
id="validationCustom03"
value={this.state.name}
/>
</div>
</Row>
<Row>
<Col md="2">
<div className="mb-4">
<label
htmlFor="example-text-input"
className="col-md-4 col-form-label"
>
כתובת
</label>
</div>
</Col>
<Col md="4">
<div className="mb-3">
<Label htmlFor="validationCustom03">עיר</Label>
<AvField
name="city"
placeholder="עיר"
type="text"
errorMessage="אנא הזן עיר תקינה"
className="form-control"
validate={{required: {value: true}}}
id="validationCustom03"
value={this.state.city}
/>
</div>
</Col>
<Col md="4">
<div className="mb-3">
<Label htmlFor="validationCustom04">רחוב</Label>
<AvField
name="street"
placeholder="רחוב"
type="text"
errorMessage="אנא הזן רחוב תקין"
className="form-control"
validate={{required: {value: true}}}
id="validationCustom04"
value={this.state.street}
/>
</div>
</Col>
<Col md="2">
<div className="mb-3">
<Label htmlFor="validationCustom05">מספר</Label>
<AvField
name="number"
placeholder="מספר"
type="text"
errorMessage="אנא הזן מספר תקין"
className="form-control"
validate={{required: {value: true}}}
id="validationCustom05"
value={this.state.number}
/>
</div>
</Col>
</Row>
<Row>
<Col md="2">
<div className="mb-4">
<label
htmlFor="example-text-input"
className="col-md-4 col-form-label"
>
פרטי קשר
</label>
</div>
</Col>
<Col md="5">
<div className="mb-2">
<Label htmlFor="validationCustom03">שם איש קשר</Label>
<AvField
name="contactName"
placeholder="איש קשר"
type="text"
errorMessage="ערך חובה"
className="form-control"
validate={{required: {value: true}}}
id="validationCustom03"
value={this.state.contactName}
/>
</div>
</Col>
<Col md="5">
<div className="mb-3">
<Label htmlFor="validationCustom04">מספר טלפון</Label>
<AvField
name="state"
placeholder="מספר טלפון"
type="text"
errorMessage="אנא הזן מספר טלפון תקין"
className="form-control"
validate={{required: {value: true}}}
id="validationCustom04"
value={this.state.phoneNumber}
/>
</div>
</Col>
</Row>
<Row className="mb-3">
<label className="col-md-2 col-form-label">מצב תצוגה</label>
<div className="col-md-10">
<select className="form-control">
<option disabled={true}>מצב תצוגה</option>
<option>מוצג</option>
<option>לא מוצג</option>
</select>
</div>
</Row>
<Row className="mb-3">
<Button color="primary" type="submit">
עדכן מוסד
</Button>
</Row>
</AvForm>
</React.Fragment>
)
}
}
export default InstituteForm
只有当 IDE(webstorm) 因更改而刷新代码时，状态才会更新。
我上传了一个视频（带有构造函数但上面的代码具有相同的结果）以更清楚地说明问题：
【问题讨论】：
-
第一个组件不是类组件！它是一个功能组件。还是你打错字了？
-
尝试从
getderivedstatefrompropsreactjs.org/docs/…将道具值设置为您的状态 -
@NitheshNarayanan stackoverflow.com/questions/68853567/…
标签： javascript reactjs state