第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 React.JS 預(yù)填充表單

使用 React.JS 預(yù)填充表單

慕容3067478 2021-12-12 15:25:17
所以,我對 React 很陌生,無法解決這個問題。我正在嘗試使用父組件從數(shù)據(jù)庫中獲取的信息預(yù)先填充表單。子組件應(yīng)該將數(shù)據(jù)顯示為默認(rèn)值,然后在用戶編輯表單時更改狀態(tài)。這就是我將數(shù)據(jù)作為道具傳遞的方式(編輯 2):componentDidMount() {    const ticketID = this.props.match.params.ticketID;    axios.get(`http://127.0.0.1:8000/api/tickets/${ticketID}`).then(res => {      this.setState({ ticket: res.data }, () => console.log(this.state.ticket));    });  }{this.state && this.state.ticket ? (  <TicketForm    requestType="put"    ticketID={this.props.match.params.ticketID}    btnText="Update"    ticket={this.state.ticket}    /> ) : (  <div />    )}這工作正常。我能夠獲取數(shù)據(jù)并將其記錄在 console.log 中,但我無法將其設(shè)置為默認(rèn)狀態(tài)。表單保持空白,當(dāng)我嘗試在其上鍵入內(nèi)容時會拋出警告:“組件正在更改要控制的文本類型的不受控制的輸入。輸入元素不應(yīng)從不受控制切換到受控制(反之亦然)”。<--- 已解決(編輯 2)我遵循了本教程https://www.youtube.com/watch?v=IK9k9hSuYeA&t=373s。子組件如下:class TicketForm extends React.Component {   constructor(props) {    super(props);    this.state = {      name: props.ticket.name || "",      description: props.ticket.description || ""    };    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)              })}我花了幾個小時試圖解決這個問題并在這里閱讀了一堆帖子,但仍然無法解決這個問題。任何幫助將非常感激。編輯 1:我終于弄明白了為什么在構(gòu)造函數(shù)上未定義 props。當(dāng)我將票證作為道具傳遞時,票證仍在從數(shù)據(jù)庫中獲取,因此構(gòu)造函數(shù)接收到的值仍然未定義。編輯 2:嘗試在父子節(jié)點(diǎn)上使用三元運(yùn)算符,以確保僅在完全設(shè)置狀態(tài)后才傳遞道具。
查看完整描述

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è)置為后備值。


查看完整回答
反對 回復(fù) 2021-12-12
?
鴻蒙傳說

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: ...}嗎?


查看完整回答
反對 回復(fù) 2021-12-12
?
撒科打諢

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>

             (...)


)}


查看完整回答
反對 回復(fù) 2021-12-12
  • 3 回答
  • 0 關(guān)注
  • 244 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號