3 回答

TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超5個贊
僅當(dāng)name或的初始狀態(tài)description未定義時才會發(fā)生此錯誤,您沒有在代碼中檢查。
嘗試將您的構(gòu)造函數(shù)更改為:
constructor(props) {
super();
this.state = {
name: props.ticket.name || '',
description: props.ticket.description || '',
};
這樣,如果您有任何一個undefined值,您仍然可以將空字符串設(shè)置為后備值。

TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個贊
你應(yīng)該super()用 props 作為參數(shù)調(diào)用:super(props)
constructor(props) {
super(props); // <-- instead of super()
this.state = {
name: props.ticket.name,
description: props.ticket.description
};
...
}
我不確定這有什么不同,似乎this.state.ticket之前通過的設(shè)置沒有正確。你能試試看console.log(this.state.ticket)它是否確實(shí)是表單的對象{name: ..., description: ...}嗎?

TA貢獻(xiàn)1934條經(jīng)驗(yàn) 獲得超2個贊
這應(yīng)該有效:在深入研究之前,您應(yīng)該了解 state 和 props 的基礎(chǔ)知識。當(dāng)您在構(gòu)造函數(shù)中初始化一個狀態(tài)時,它只會被初始化一次。React 沒有辦法根據(jù) props 更新組件狀態(tài)。因此,為了實(shí)現(xiàn)這一點(diǎn),他們提供了一個getDerivedStateFromProps顧名思義的鉤子來從道具中導(dǎo)出狀態(tài)。希望它可以幫助您清除您的疑問。
另一方面,我鼓勵您從 React Hooks 而不是類組件開始,因?yàn)槭褂胾seEffect功能組件可以輕松處理這些錯誤。我希望我能給你一個更好的概述。如果您仍然發(fā)現(xiàn)任何困難,請告訴我。
class TicketForm extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "",
description: ""
};
static getDerivedStateFromProps(props, state) {
// Stringify as to check ticket is an object. In case it is a string
// or integer you can directly, check the equality
if (JSON.stringify(props.ticket) !== JSON.stringify(state)) {
return {
name: props.ticket.name,
description: props.ticket.description
}
}
return null;
}
handleChange = e => {
this.setState({
[e.target.name]: e.target.value
});
};
(...)
render() {
return (
<div className="form-container">
<div className="card mb-3">
<div className="card-header">
<h2>{this.state.btnText} Ticket</h2>
</div>
<div className="card-body">
<form
onSubmit={e =>
this.onSubmit(e, this.props.requestType, this.props.ticketID)
}
>
<div className="form-group">
<label htmlFor="name">Name</label>
<input
type="text"
name="name"
className="form-control form-control-lg"
placeholder="Ticket name"
value={this.state.name}
onChange={e => {
this.handleChange(e);
}}
/>
</div>
<div className="form-group">
<label htmlFor="description">Description</label>
<textarea
name="description"
className="form-control form-control-lg"
rows="3"
placeholder="Ticket Description"
value={this.state.description}
onChange={e => {
this.handleChange(e);
}}
></textarea>
</div>
(...)
)}
添加回答
舉報